1、下载webpack 工具
npm install -g webpack #webpack的cil环境
npm install -g webpack-dev-server #webpack自带的服务器
2、各种依赖库————项目本地下载
# webpack 本身
npm install webpack -D #webpack本地依赖库
npm install webpack-dev-server -D #webpack服务器的本地依赖
#babel相关库
npm install babel-core -D #后台编译babel工具
npm install babel-preset-es2015 -D #babel对ES2015的预设
npm install babel-loader -D #babel加载器
npm install babel-preset-react -D #babel对react的预设
#react相关
npm install react -D #react 本身
npm install react-dom -D #react-dom 本身
npm instakk react-hot-loader -D #react 热更新
#优化相关
npm install style-loader -D
npm install css-loader
3、编写webpack配置相关文件
/** * Created by Administrator on 2017/6/16. * webpack配置文件 */ module.exports = { entry: './index.js',//入口点 output: { //输出到哪 path: __dirname, //编译后的地址 推荐用变量 filename: 'bundle.js'//编译后文件的名称 }, devtool: 'source-map', //开发工具 module: { //用到哪些模块 loaders: [//指定loader { test: /\.css$/, loader: 'style-loader!css-loader' },//如果文件结尾是.css,则使用style-loader作为css打包器 { test: /\.js$/, loader: 'react-hot-loader!babel-loader', exclude:/node_modules/ }//如果文件结尾是.js,则使用react-hot-loader作为js打包器,但是,node_modules问价夹里的js不需要动。 ] } };
4、配置babel预设文件—— .baberc文件,
// babel所需文件 ,配置babel里的preset { presets: [ ['es2015'], ['react'] ] }
欢迎分享本文,转载请保留出处:前端ABC » webpack+react使用工具配置