前言
项目初始目录结构如下：
-build_test //项目名
-node_modules
-public
index.html
-src
index.js //入口文件
app.js
other.js
style.css
-package.json
其中，public/index.html为展示页面，其代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="builder.js"></script> //导入打包输出文件
</body>
</html>
1.安装webpack
依次执行如下命令：
1.npm install -g webpack; //全局安装webpack
2.npm install webpack --save-dev; //安装关联到项目目录
3.npm install webpack-cli -g; //此工具用于在命令行中运行 webpack
4.npm install webpack webpack-cli --save-dev;
2.下载模块加载器（loader）
安装项目需要用到的所有loaders，例如css-loader、style-loader、babel-loader等。
5.npm install xxx-loader --save-dev;
3.打包两种方式
3.1 手动配置webpack.config.js
1.在build_test下创建文件webpack.config.js:
const path = require('path');
module.exports = {
entry:path.resolve(__dirname, './src/index.js'), //指定打包入口文件
output:{
path: path.resolve(__dirname, './public'), //指定打包输出路径
filename:"builder.js", //指定打包输出文件名
},
devtool:'none',
//devServer 构建本地服务器
devServer: {
contentBase:'./public',
historyApiFallback:true, //不跳转
inline:true,//实时刷新
hot:true //热更新
},
module:{ //对模块的处理逻辑
rules:[ //一系列加载器的处理逻辑
{
test:/\.css$/, //正则，匹配到的文件后缀名
loaders:["style-loader","css-loader"], //用此加载器处理匹配到的文件
exclude:[ //排除此文件夹下的文件
path.resolve(__dirname, "./node_modules")
]
},{
test: /(\.jsx|\.js)$/,
loader: [
"babel-loader"
],
exclude:[ path.resolve(__dirname,"./node_modules/")]
}
]
},
resolve:{
extensions: [".js", ".json", ".jsx", ".css"] //自动补全识别后缀
}
}
2.devServer 构建本地服务器：让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。
npm install --save-dev webpack-dev-server
3.在终端输入命令，打包并开启本地服务器
webpack-dev-server --port 3000 //此处指定了端口号，也可不写默认8080
4.终端结果输出编译成功，此时可见public文件夹下自动生成了打包输出文件builder.js. 访问localhost:3000，可访问public/index.html内容。
3.2 终端命令打包
npx webpack src/index.js -o public/builder.js --mode development;
此处打包后在public目录下生成打包输出文件builder.js，因未配置本地服务器，需在其他html文件引入builder.js静态访问此html文件以查看页面效果。