共计 1176 个字符，预计需要花费 3 分钟才能阅读完成。
项目文件准备：
执行 npm init, 然后创建如下图所示的文件。
在 index.html 里面添加
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id=”app”></div>
<script src=”./bundle.js”></script>
</body>
</html>
在 webpack.config.js 里面添加
module.exports = {
entry: ‘./src/index.js’,
output: {
path: __dirname + ‘/dist’,
publicPath: ‘/’,
filename: ‘bundle.js’
},
devServer: {
contentBase: ‘./dist’
}
};
在 package.json 里面添加
“scripts”: {
“start”: “webpack-dev-server –config ./webpack.config.js –mode development”
},
这样，当执行 npm start 的时候，就会使用 webpack-dev-server 把 index.js 相关文件打包，生成 bundle.js，这时候浏览器会打开一个窗口，执行 index.html(contentBase 里面定义了），又因为 index.html 里面引入了 bundle.js，就可以把压缩后的 js 文件执行起来。当然引入 bundle.js 这一步可以由我们强大的 html-webpack-plugin 完成。
安装依赖
npm install –save-dev webpack webpack-dev-server webpack-cli
npm install –save-dev @babel/core @babel/preset-env
npm install –save-dev babel-loader
npm install –save-dev @babel/preset-react
配置 babel
在根目录下新建.babelrc 文件，然后添加
{
“presets”: [
“@babel/preset-env”,
“@babel/preset-react”
]
}
在 webpack.config.js 里面添加 babel-loader 配置
module.exports = {
…
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [‘babel-loader’]
}
]
},
resolve: {
extensions: [‘*’, ‘.js’, ‘.jsx’]
}
…
};
这个时候执行 npm start, 就可以在浏览器访问 http://localhost:8080 看到 Index.html 里面的内容啦啦。
