React-route和Webpack快速构建一个react程序
来源:互联网 发布:移动数据专业认证考试 编辑:程序博客网 时间:2024/06/11 03:22
我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息。
$ npm init
接下来我们开始安装依赖项,我的 package.json 的依赖项如下
"devDependencies": { "babel": "^5.5.6", "babel-core": "^5.5.6", "babel-loader": "^5.1.4", "history": "^1.13.1", "react": "^0.13.3", "react-hot-loader": "^1.2.7", "react-router": "^0.13.3", "webpack": "^1.12.6", "webpack-dev-server": "^1.12.1" }
运行命令:
$ npm install
安装所依赖的包,会在根目录生成 node_modules的文件夹
可以直接运行$ webpack --display-error-details 命令 打包文件,不过这只有webpack的配置文件是webpack.config.js 关于这个配置文件
打开webpack.config.js,然后添加下面的代码:
var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', "./js/app.js" ], output: { path: __dirname + '/build', filename: "bundle.js" }, module: { loaders: [ { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, { test: /\.css$/, loader: "style!css" } ] }, plugins: [ new webpack.NoErrorsPlugin() ]};这份文件大概有四个配置项 entry , output , module , plugins .
entry :指定打包的入口文件,每有一个键值对,就是一个入口文件。
output :配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称,filename里面的[name]会由entry中的键替换,例子中的 /build/bundle.js 便是生成的文件。
resolve :定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全.
module :定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会进行处理。这里我们使用了 react-hot 和 babel 。 babel-loader 是我们使用ES-6进行开发时用于生成JS文件。
最后我们生成了一个style.css仅仅做个例子,告诉我们如何引入样式文件,实际上我们可以加载诸如 sass-loader 这样的加载器。
loader 对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。当然这些loader也需要通过npm install安装。
plugins : 这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js。
NoErrorsPlugin : 定义代码出现错误时的时受否自动重新加载。
$ webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包指定其他的配置文件打包时 所用命令$ webpack --config XXX.js
$ webpack --watch //监听变动并自动打包$ webpack -p //压缩混淆脚本,这个非常非常重要!$ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
- 使用React-route和Webpack快速构建一个react程序
- React-route和Webpack快速构建一个react程序
- 使用React-route和Webpack快速构建一个react程序
- React+Webpack+Nodejs+Express快速构建项目
- react+webpack构建步骤
- React+Webpack构建环境
- webpack构建react项目
- 从零开始-使用React+Webpack+Nodejs+Express快速构建项目
- Webpack&React (四) Webpack 和 React
- Webpack&React (九) 构建Kanban
- 使用Webpack构建React应用
- React配合Webpack构建项目
- Webpack构建React基础工程
- react 实战案例(webpack构建)
- React+webpack构建你的第一个程序
- 从零构建一个react+webpack+typescript的应用
- react和webpack
- React+Webpack快速上手指南
- Consul入门05 - 健康检测
- java中的域,静态域,实例域
- 自定义Dialog
- 字符驱动程序内核编程小结
- java.text.Format及相关类详解
- React-route和Webpack快速构建一个react程序
- 自定义View系列教程08--滑动冲突的产生及其处理
- 1、TCP/IP协议簇
- Linux下安装Tomcat服务器和部署Web应用
- 验证Jdk安装用记事本写的文件如何运行注意事项
- The APK file does not exist on disk.Error while Installing APK
- Java基础教程
- intellij git 更新代码报错
- 自定义View