前端Webpack
以下采用webpack 4实现！
快速上手
安装yarn add webpack webpack-cli --dev
查看版本 yarn webpack --version
版本 4.40.2
打包 yarn webpack
打包会默认进入 src/index.js入口
注意：如果全局已经安装了webpack，上述均需要采用npx webpack命令，npx命令可以执行当前包的命令。
webpack配置文件
webpack.config.js
可在此文件配置入口、配置输出等
工作模式
可指定生产或者开发模式
yarn webpack --mode development
loader加载器
loader是负责加载资源。
loader的执行顺序是从后往前，所以css-loader需要放在style-loader后面。
css-loader负责处理css文件，而style-loader负责追加到DOM中。
处理ES5\ES6：bebel-loader @babel/core @babel/preset-env
plugin插件
clean-webpack-plugin 自动清理输出目录里的多余文件
html-webpack-plugin 生产index.html文件，可配置模板文件
copy-webpack-plugin 拷贝文件到输出目录
mini-css-extract-plugin 用于将 CSS 代码从 JavaScript 中提取出来，并生成独立的 CSS 文件
css-minimizer-webpack-plugin用来压缩 CSS 文件
webpack-dev-server
安装：yarn add webpack-dev-server --dev
Source Map
当代码转换后，代码会压缩转义，从而浏览器控制台不好定位的报错代码的具体位置。使用了Source Map后，可以通过映射的方式，从而定位到报错位置。
Source Map有多种类型，结合开发环境和生产环境，选择合适的Souce Map类型。
HMR
热更新，在不改变页面状态的时候，更新代码，从而提升开发体验。
环境配置
yarn webpack --env production
在webpack.config.js中定义 module.exports = (env, argv) => { 这里可以获取到env的值 }
另外一种方式，可以在package.json中指定运行的webpack.config.js
可以使用DefinePlugin 记录一些信息，如：BASE_URL
Tree Shaking
在webpack.config.js中定义，optimization:{ usedExports: true, minimize: true}
usedExports用于标记未被使用的代码
minimize用于移除未被使用的代码
Webpack5
打包进来的叫做chunks，输出出去的叫bundles。
代码分割
在optimization中，可以配置splitChunks对node_moudles中比较大的包进行分割
// 代码分割配置
splitChunks: {
chunks: "all",
cacheGroups: {
// layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
// 可以单独打包，从而复用
// 如果项目中没有，请删除
layouts: {
name: "layouts",
test: path.resolve(__dirname, "../src/layouts"),
priority: 40,
},
// 如果项目中使用antd，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
// 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
// 如果项目中没有，请删除
antd: {
name: "chunk-antd",
test: /[\/]node_modules[\/]antd(.*)/,
priority: 30,
},
// 将react相关的库单独打包，减少node_modules的chunk体积。
react: {
name: "react",
test: /[\/]node_modules[\/]react(.*)?[\/]/,
chunks: "initial",
priority: 20,
},
libs: {
name: "chunk-libs",
test: /[\/]node_modules[\/]/,
priority: 10, // 权重最低，优先考虑前面内容
chunks: "initial",
},
},
},
注入变量
Webpack 编译时可以通过 DefinePlugin 注入到前端代码中。
热更新
搭建Vue脚手架时，因为vue-loader中做了处理，所以不用对热更新做配置。
而使用Webpack搭建React脚手架时，需要下载其他plugins对js配置热更新。
"@pmmmwh/react-refresh-webpack-plugin"
"react-refresh/babel"
{
test: /.(jsx|js)$/,
include: path.resolve(__dirname, "../src"),
loader: "babel-loader",
options: {
cacheDirectory: true,
cacheCompression: false,
plugins: [
// "@babel/plugin-transform-runtime", // presets中包含了
"react-refresh/babel", // 开启js的HMR功能
],
},
},
loader
module.exports = function (content, map, meta) {
return content;
};
loader接受三个参数：content源文件内容、map SourceMap数据、meta 数据，可以是任何数据。
Webpack5与Webpack4区别
1.Webpack5内置了很多loader，例如：file-loader、url-loader、clean-webpack-plugin等。
