持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
我们之前已经搭建过一个简易版的react的cli和vue的cli了，现在我们通过这个react-cli来搭建一个webrtc的前端页面。
直接给出我们的webpack.config.js再来进行分析
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
chunkFilename: "[name].bundle.js",
},
module: {
rules: [
{
test: /\.(le|c)ss$/,
use: [
// 解析规则为从右向左，即 less-loader, postcss-loader, css-loader, style-loader
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true, //是否打开样式查找
},
},
{
loader: "postcss-loader",
//配置参数
options: {
postcssOptions: {
//添加插件autoprefixer,能加前缀
plugins: [require("autoprefixer")],
},
},
},
{
loader: "less-loader", // 解析样式文件
options: {
sourceMap: true,
},
},
],
},
{
test: /\.(js)x?$/,
use: ["babel-loader"],
exclude: /node-modules/,
},
],
},
plugins: [
new HTMLWebpackPlugin({
inject: true, // 所有js脚本放于body之后
hash: true, // 为静态资源生成hash，用于清楚缓存
cache: true, // 仅在文件被更改时发出文件
title: "react admin",
filename: "index.html",
template: path.resolve(__dirname, "./public/index.html"),
minify: {
collapseWhitespace: true, // 折叠空白
removeComments: true, // 删除注释
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
},
}),
new CleanWebpackPlugin(),
],
devServer: {
static: {
directory: path.resolve(__dirname, "dist"),
},
compress: true,
port: 9000,
hot: true,
},
};
在配置中也有进行一些配置的介绍，重新添加的内容不是很多，相比之前有所改变的地方在下文我会做出假设，至于大部分的配置可以看这篇文章react性能优化。
新增clean-webpack-plugin
之前简易版的react-cli中我们可以发现当我们修改entry对应的文件名时，重新执行打包，会发现之前的打包文件还存在，这样就会导致我们的dist文件夹会包含很多之前打包的跟当前代码无关的文件，这样其实对我们的项目并不友好，这里我们想要在每次打包的时候都把dist给移除了，并重新生成clean-webpack-plugin 插件可以帮助我们实现这个需求，先下载这个包 npm i clean-webpack-plugin -D然后在webpack.config.js中进行配置，plugins用于我们配置我们想要的相关插件，接收一个数组值，这样我们的项目就可以在每次打包前都将dist清空了，就不会存在无用文件在内了。
output中新增chunkFilename
我们的=脚手架原来只有filename，这次新增了chunkFilename。
- filename 是一个很常见的配置，就是对应于 entry 里面的输入文件，经过webpack 打包后输出文件的文件名。比如我们的配置中，生成出来的文件名为 main.js。
- chunkFilename 指未被列在 entry 中，却又需要被打包出来的 chunk 文件的名称。一般来说，这个 chunk 文件指的就是要懒加载的代码。区别是output.filename 的输出文件名是 [name].min.js，[name] 根据 entry 的配置推断为 index，所以输出为 index.min.js；如果output.chunkFilename 没有显示指定，就会把 [name] 替换为 chunk 文件的 id 号，假设这里文件的 id 号是 1，那么文件名就是 1.min.js。如果我们显式配置 chunkFilename，就会按配置的名字生成文件，这里我们就是显示配置。
