1.安装
#安装webpack
npm install --save-dev webpack
#如果使用webpack4+还要安装cli
npm install --save-dev webpack-cli
#安装输出设置插件
npm install --save-dev html-webpack-plugin
#安装webpack-dev-server
npm install --save-dev webpack-dev-server
#babel 核心包
npm install --save-dev babel-core
#babel 语法转换的包
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-stage-0
#babel API转换的包
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
#结合webpack使用需要安装的包,为什么安装7版本见版本匹配目录
npm install --save-dev babel-loader@7
#安装react和react-dom
npm install --save react react-dom
#解析react语法的预设
npm install --save-dev babel-preset-react
2.配置webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
//webpack 4.x中,如果不写entry,他默认打包src下index.js
//若不写output,默认打包到dist目录下,生成main.js文件
module.exports = {
mode:"development",
devServer: {
//配置webpack-dev-server的www目录
contentBase: './'
},
//-----------------输出设置 start------------------
plugins: [
// 该插件就是将index.html打包到你bundle.js所属的目录,同时会自动在index.html中注入script标签,所以在src/index.html文件中不用自己引入bundle.js
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module:{
rules:[
{
test: /\.jsx?$/,
exclude: /node_modules/,//排除node_modules目录中的文件
use: 'babel-loader'
}
]
}
}
3.配置.babelrc
{
"presets":["env","stage-0","react"],
"plugins":["transform-runtime"]
}
4.配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack"
},
4.启动
npm run dev