*所有的全局安装电脑第一次用的时候安装,安过一次即可省略,添加到依赖不可省略 [-D===--save-dev]
1、创建文件夹(以下都在当前文件夹下)
//webpack的引用
2、初始化创建package.json: npm init
3、全局安装webpack: npm install webpack -g(全局安装)
并安装依赖webpack: npm install webpack –D
//css的引用
4、安装css,style压缩模块:
npm install css-loader style-loader -D
//解析jsx
5、安装babel-loader模块:npm install babel-loader –D
//ES6的引用
6、安装babel转换器模块:npm install babel-core –D
7、安装es6模块:npm install babel-preset-es2015 –D
//react的引用
8、安装react相关模块:
npm install react react-dom babel-preset-react –D
//文件路径以及url的引用
9、安装url-loader file-loader模块将图片及其他格式文件解析:
npm install url-loader file-loader –D
//webpack-dev-server: 开一个轻量级服务器,进行热替换以及后边热更新的配置。
10、安装webpack服务webpack-dev-server:
npm install webpack-dev-server –g (全局安装)
并且安装到依赖中:npm install webpack-dev-server –D
11、安装react-hot-loader热加载:npm install react-hot-loader -D
//11热更新另一种方法替react-hot-loader(此方法不需要在webpack.config.js中的moudule写入代码)
11、热更新配置npm install babel-preset-react-hmre -D
在.babelrc文件中的配置:
{
“presets” : [“react” , “es2015”] ,
“env” : {
“development” : {
“presets” : “react-hmre”
}
}
}