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