Re:用webpack从零开始的vue-cli搭建'生活'

有了vue-cli的帮助，我们创建vue的项目非常的方便，使用vue create然后选择些需要的配置项就能自动帮我们创建配置好的webpack项目脚手架了，实在是‘居家旅行’必备良药。这次借着学习webpack的机会，不用vue-cli搭建一个vue项目。

注：基于webpack5，其运行于 Node.js v10.13.0+ 的版本。

完整代码：https://github.com/mashiro-cat/learn_webpack

webpack基础

webpack官网：https://webpack.js.org/
webpack中文官网：https://webpack.docschina.org/
安装：

npm i webpack webpack-cli -D 

运行：

npx webpack ./src/main.js --mode=development # 根目录有配置文件 npx webpack 

打开文档就能看到五个核心配置点：

1. 入口(entry)
2. 输出(output)
3. loader
4. 插件(plugin)
5. 模式(mode)

webpack本身只提供了对js中ES Module和压缩的支持，很多功能都要通过使用loader或者plugin拓展。

webpack.config.js配置文件编写：

module.exports = {   // 入口 多入口则配置成对象形式   entry:"",   // 输出 需使用绝对路径   output:{},   // loader   module:{     rules:[]   },   // 插件   plugins:[],   // development 或者 production   // 生产模式默认开启js和html压缩   mode:"development" } 

样式资源处理

配置资源输出的路径和名称

输出：

output: {     path: path.resolve(__dirname, 'dist'),     filename: 'static/js/main.js' // 将js输出到 static/js 目录中   } 

module中：

generator: {           // 将图片文件输出到 static/imgs 目录中           // 将图片文件命名 [hash:8][ext][query]           // [hash:8]: hash值取8位 直接[hash]则不截取           // [ext]: 使用之前的文件扩展名           // [name]: 会使用之前的名字           // [query]: 添加之前的query参数           filename: "static/imgs/[hash:8][ext][query]",         }, 

css处理

安装两个loader，其使用顺序是css-loader会处理css，而将编译的css经style-loader后会动态创建style标签。
css-loader

# 安装 npm i css-loader style-loader -D 

rules: [       // 两个loader顺序按此 它会先使用后面的       { test: /.css$/i, use: ["style-loader", "css-loader"] }     ] 

提取css到单独文件

现在是css全部是打包到js中，然后动态插入的。若需要提取到单独文件，则可以借助插件。

// 安装插件 npm i mini-css-extract-plugin -D  // 配置插件 const MiniCssExtractPlugin = require("mini-css-extract-plugin");  // 将styel-loader改为MiniCssExtractPlugin.loader {   // 用来匹配 .css 结尾的文件   test: /.css$/,   // use 数组里面 Loader 执行顺序是从右到左   use: [MiniCssExtractPlugin.loader, "css-loader"], },  plugins:[ new MiniCssExtractPlugin({       // 定义输出文件名和目录       filename: "static/css/main.css",     }), ] 

css兼容处理

// 安装 npm i postcss-loader postcss postcss-preset-env -D  // 配置  {         // 用来匹配 .css 结尾的文件         test: /.css$/,         // use 数组里面 Loader 执行顺序是从右到左         use: [           MiniCssExtractPlugin.loader,           "css-loader",           { // 在css-loader之后，预处理器loader之前             loader: "postcss-loader",             options: {               postcssOptions: {                 plugins: [                   "postcss-preset-env", // 能解决大多数样式兼容性问题                 ],               },             },           },         ],       },  

控制兼容性：
package.json 文件中添加 browserslist 来控制样式的兼容性的程度：

{   // 其他省略   //"browserslist": ["ie >= 8"]   // 实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：   // 所有浏览器的最新两个版本 支持市面上99%浏览器 还没死的浏览器   "browserslist": ["last 2 version", "> 1%", "not dead"] } 

css压缩

安装插件:

npm i css-minimizer-webpack-plugin -D 

webpack配置：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");  plugins:[   // css压缩   new CssMinimizerPlugin(), ]  

预处理器

使用less，scss等预处理都要安装对应的loader进行编译，webpack才能识别处理。

less的使用：

// 安装less-loader npm i less-loader -D  // 配置 // less-loader将less转为css后还是要交给css-loader处理的 {   test: /.less$/,   use: ["style-loader", "css-loader", "less-loader"] } 

scss, sass的使用：

// 安装 npm i sass-loader sass -D  // 配置 {   test: /.s[ac]ss$/,   use: ["style-loader", "css-loader", "sass-loader"], }, 

点击查看完整配置

 const path = require('path')  module.exports = {   // 入口 多入口则配置成对象形式   entry: "./src/main.js",   // 输出 需使用绝对路径   output: {     path: path.resolve(__dirname, 'dist'),     filename: 'main.js'   },   // loader   module: {     rules: [       // 两个loader顺序按此 它会先使用后面的       { test: /.css$/i, use: ["style-loader", "css-loader"] },       // less-loader将less转为css后还是要交给css-loader处理的       { test: /.less$/, use: ["style-loader", "css-loader", "less-loader"] },       {         test: /.s[ac]ss$/,         use: ["style-loader", "css-loader", "sass-loader"],       },     ]   },   // 插件   plugins: [],   // development 或者 production   mode: "development" } 

图片资源处理

Webpack4使用file-loader 和 url-loader处理图片资源，而webpack5将那俩都内置了，直接配置开启就可。

{   test: /.(png|jpe?g|gif|webp)$/,   type: "asset", }, 

将小于某个大小的图片转化成Base64可添加此配置：

{         test: /.(png|jpe?g|gif|webp)$/,         type: "asset",         parser: {           dataUrlCondition: {             maxSize: 10 * 1024 // 小于10kb的图片会被base64处理           }         } }, 

点击查看完整配置

 const path = require('path')  module.exports = {   // 入口 多入口则配置成对象形式   entry: "./src/main.js",   // 输出 需使用绝对路径   output: {     path: path.resolve(__dirname, 'dist'),     filename: 'main.js'   },   // loader   module: {     rules: [       // 两个loader顺序按此 它会先使用后面的       { test: /.css$/i, use: ["style-loader", "css-loader"] },       // less-loader将less转为css后还是要交给css-loader处理的       { test: /.less$/, use: ["style-loader", "css-loader", "less-loader"] },       {         test: /.s[ac]ss$/,         use: ["style-loader", "css-loader", "sass-loader"],       },       {         test: /.(png|jpe?g|gif|webp)$/,         type: "asset",         parser: {           dataUrlCondition: {             maxSize: 10 * 1024 // 小于10kb的图片会被base64处理           }         }       },     ]   },   // 插件   plugins: [],   // development 或者 production   mode: "development" } 

其它资源处理

若项目中引用了字体，视频等资源，则是希望不要处理它，直接输出就好了。配置为type: "asset/resource"它就会原封不动的输出了。

{         // 处理字体图标或者视频等其它资源         test: /.(ttf|woff2?|map4|map3)$/,         type: "asset/resource",         generator: {           filename: "static/media/[hash:8][ext][query]",         },       } 

点击查看完整配置

 const path = require('path')  module.exports = {   // 入口 多入口则配置成对象形式   entry: "./src/main.js",   // 输出 需使用绝对路径   output: {     path: path.resolve(__dirname, 'dist'),     filename: 'static/js/main.js', // 将js输出到 static/js 目录中     clean: true   },   // loader   module: {     rules: [       // 两个loader顺序按此 它会先使用后面的       { test: /.css$/i, use: ["style-loader", "css-loader"] },       // less-loader将less转为css后还是要交给css-loader处理的       { test: /.less$/, use: ["style-loader", "css-loader", "less-loader"] },       {         test: /.s[ac]ss$/,         use: ["style-loader", "css-loader", "sass-loader"],       },       {         test: /.(png|jpe?g|gif|webp)$/,         type: "asset",         parser: {           dataUrlCondition: {             maxSize: 10 * 1024 // 小于10kb的图片会被base64处理           }         },         generator: {           // 将图片文件输出到 static/imgs 目录中           // 将图片文件命名 [hash:8][ext][query]           // [hash:6]: hash值取6位           // [ext]: 使用之前的文件扩展名           // [query]: 添加之前的query参数           filename: "static/imgs/[hash:6][ext][query]",         },       },       {         // 处理字体图标或者视频等其它资源         test: /.(ttf|woff2?|map4|map3)$/,         type: "asset/resource",         generator: {           filename: "static/media/[hash:8][ext][query]",         },       },     ]   },   // 插件   plugins: [],   // development 或者 production   mode: "development" } 

js资源处理

代码质量检测 Eslint

安装：

npm i eslint-webpack-plugin eslint -D 

在webpack配置中使用eslint插件

const ESLintWebpackPlugin = require("eslint-webpack-plugin");  plugins: [     new ESLintWebpackPlugin({       // 指定检查文件的根目录       context: path.resolve(__dirname, "src"),     }),   ], 

编写配置:
配置文件由很多种写法：.eslintrc.*：新建文件，位于项目根目录

• .eslintrc
• .eslintrc.js
• .eslintrc.json

区别在于配置格式不一样package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写,ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

根目录创建.eslintrc.js配置文件

// .eslintrc.js module.exports = {   // 解析配置项   parserOptions: {     ecmaVersion: 6, // ES 语法版本     sourceType: "module", // ES 模块化   },   env: {     node: true, // 启用node中全局变量     browser: true, // 启用浏览器中全局变量 不开启则像 console Math 等全局变量无法使用   },   // 继承规则   extends: ['eslint:recommended'],   // 检测规则   // 自定义的规则会覆盖继承的规则   // "off" 或 0 - 关闭规则   // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)   // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)   rules: {     semi: "off", // 禁止使用分号     'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告     'default-case': [       'warn', // 要求 switch 语句中有 default 分支，否则警告       { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了     ],     eqeqeq: [       'warn', // 强制使用 === 和 !==，否则警告       'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告     ],   }, } 

babel兼容处理

安装：

npm i babel-loader @babel/core @babel/preset-env -D 

babel配置编写：
配置文件由很多种写法：

1. babel.config.*：新建文件，位于项目根目录

• babel.config.js
• babel.config.json

2. .babelrc.*：新建文件，位于项目根目录

• .babelrc
• .babelrc.js
• .babelrc.json

package.json 中 babel：不需要创建文件，在原有文件基础上写

presets 预设:
简单理解：就是一组 Babel 插件, 扩展 Babel 功能
@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babel/preset-typescript：一个用来编译 TypeScript 语法的预设

// 创建.babelrc.js module.exports = {   presets: ["@babel/preset-env"], }; 

webpack增加babel

{   test: /.js$/,   exclude: /node_modules/, // 排除node_modules代码不编译   loader: "babel-loader", }, 

html自动导入处理

安装html-webpack-plugin

npm i html-webpack-plugin -D 

webpack配置, 配置好后就会自动的引入所需的js了。

const HtmlWebpackPlugin = require("html-webpack-plugin");  plugins: [     new HtmlWebpackPlugin({       // 以 public/index.html 为模板创建文件       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源       template: path.resolve(__dirname, "public/index.html"),     }), ] 

webpackSever

使用webpacksever后，在开发时就能自动检测文件变化，并实时编译展示出来了。

// 安装 npm i webpack-dev-server -D  // 配置 devServer: {     host: "localhost", // 启动服务器域名     port: "3000", // 启动服务器端口号     open: true, // 是否自动打开浏览器   }, 

运行：

// 此时不会打包生成文件，都是在内存中进行编译的 npx webpack serve 

点击查看完整配置

 const path = require('path') const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin");  module.exports = {   // 入口 多入口则配置成对象形式   entry: "./src/main.js",   // 输出 需使用绝对路径   output: {     path: path.resolve(__dirname, 'dist'),     filename: 'static/js/main.js', // 将js输出到 static/js 目录中     clean: true   },   // loader   module: {     rules: [       // 两个loader顺序按此 它会先使用后面的       { test: /.css$/i, use: ["style-loader", "css-loader"] },       // less-loader将less转为css后还是要交给css-loader处理的       { test: /.less$/, use: ["style-loader", "css-loader", "less-loader"] },       {         test: /.s[ac]ss$/,         use: ["style-loader", "css-loader", "sass-loader"],       },       {         test: /.(png|jpe?g|gif|webp)$/,         type: "asset",         parser: {           dataUrlCondition: {             maxSize: 10 * 1024 // 小于10kb的图片会被base64处理           }         },         generator: {           // 将图片文件输出到 static/imgs 目录中           // 将图片文件命名 [hash:8][ext][query]           // [hash:6]: hash值取6位           // [ext]: 使用之前的文件扩展名           // [query]: 添加之前的query参数           filename: "static/imgs/[hash:6][ext][query]",         },       },       {         // 处理字体图标或者视频等其它资源         test: /.(ttf|woff2?|map4|map3)$/,         type: "asset/resource",         generator: {           filename: "static/media/[hash:8][ext][query]",         },       },       { // babel配置         test: /.js$/,         exclude: /node_modules/, // 排除node_modules代码不编译         loader: "babel-loader",       },     ]   },   // 插件   plugins: [     new ESLintWebpackPlugin({       // 指定检查文件的根目录       context: path.resolve(__dirname, "src"),     }),     new HtmlWebpackPlugin({ // html处理的插件       // 以 public/index.html 为模板创建文件       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源       template: path.resolve(__dirname, "public/index.html")     })   ],   devServer: {     host: "localhost", // 启动服务器域名     port: "666", // 启动服务器端口号     open: true, // 是否自动打开浏览器   },   // development 或者 production   mode: "development" } 

webpack进阶

使用sourcemap

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。
通过查看Webpack DevTool文档可知，SourceMap 的值有很多种情况.
开发时我们只需要关注两种情况即可：
开发模式：cheap-module-source-map，优点：打包编译速度快，只包含行映射，缺点：没有列映射
生产模式：source-map，优点：包含行/列映射，缺点：打包编译速度更慢。

配置：

devtool: "cheap-module-source-map", 

提升打包速度

HotModuleReplacement:它（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

module.exports = {   // 其他省略   devServer: {     host: "localhost", // 启动服务器域名     port: "3000", // 启动服务器端口号     open: true, // 是否自动打开浏览器     hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）   }, }; 

此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。 但是 js 可以使用vue-loader, react-hot-loader实现。

OneOf配置（开发和正式都能用）：
匹配到一条规则就不继续匹配了

module: {     rules: [         {             oneOf: [                 { test: /.css$/, use: ["style-loader", "css-loader"] },                 .........             ]         }     ] } 

Include/Exclude
如在配置babel排除node_moudels文件夹

使用缓存Cache
每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了

// babel {             test: /.js$/,             // exclude: /node_modules/, // 排除node_modules代码不编译             include: path.resolve(__dirname, "../src"), // 也可以用包含             loader: "babel-loader",             options: {               cacheDirectory: true, // 开启babel编译缓存               cacheCompression: false, // 缓存文件不要压缩             },           },   // Eslint new ESLintWebpackPlugin({       // 指定检查文件的根目录       context: path.resolve(__dirname, "../src"),       exclude: "node_modules", // 默认值       cache: true, // 开启缓存       // 缓存目录       cacheLocation: path.resolve(         __dirname,         "../node_modules/.cache/.eslintcache"       ),     }) 

打包启用多线程：
开启线程也需要时间，小项目可能提升不明显。
npm i thread-loader -D安装loader，然后配置：

// nodejs核心模块，直接使用 const os = require("os"); const TerserPlugin = require("terser-webpack-plugin"); // webpack自带的js压缩模块  // cpu核数 const threads = os.cpus().length;  // babel使用多线程 {             test: /.js$/,             // exclude: /node_modules/, // 排除node_modules代码不编译             include: path.resolve(__dirname, "../src"), // 也可以用包含             use: [               {                 loader: "thread-loader", // 开启多进程                 options: {                   workers: threads, // 数量                 },               },               {                 loader: "babel-loader",                 options: {                   cacheDirectory: true, // 开启babel编译缓存                 },               },             ],           },  // Eslint使用多线程 new ESLintWebpackPlugin({       // 指定检查文件的根目录       context: path.resolve(__dirname, "../src"),       exclude: "node_modules", // 默认值       cache: true, // 开启缓存       // 缓存目录       cacheLocation: path.resolve(         __dirname,         "../node_modules/.cache/.eslintcache"       ),       threads, // 开启多进程     }),  // js压缩使用多线程 optimization: {     minimize: true,     minimizer: [       // css压缩也可以写到optimization.minimizer里面，效果一样的       new CssMinimizerPlugin(),       // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了       new TerserPlugin({         parallel: threads // 开启多进程       })     ],   }, 

减少的代码体检

Tree Shaking: 默认开启，通常用于描述移除 JavaScript 中的没有使用上的代码。

Babel优化：
@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

// 安装 npm i @babel/plugin-transform-runtime -D  // 配置 {                 loader: "babel-loader",                 options: {                   cacheDirectory: true, // 开启babel编译缓存                   cacheCompression: false, // 缓存文件不要压缩                   plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积                 },               }, 

优化代码运行性能

打包代码分块
Preload / prefetch
使用Core-js
使用PWA

从零开始搭建vue-webpack项目

使用的库：
设置环境变量：
https://www.npmjs.com/package/cross-env

// 安装 npm install --save-dev cross-env  // package.json  

vue-loder文档： https://vue-loader.vuejs.org/zh/
安装vue-loader

npm i vue npm install -D vue-loader vue-template-compiler  module: {     rules: [       // ... 其它规则       {         test: /.vue$/,         loader: 'vue-loader'       }     ]   },   plugins: [     // 请确保引入这个插件！     new VueLoaderPlugin()   ] 

样式处理

style-loader 替换为 vue-style-loader，并安装预处理器loader

npm i -D css-loader vue-style-loader less-loader less-loader sass-loader stylus-loader 

设置拓展名自动布局

resolve: {     extensions: [".vue", ".js", ".json"], // 自动补全文件扩展名，让vue可以使用   }, 

Eslint配置指定为vue的

npm i -D @babel/eslint-parser  // .eslintrc.js module.exports = {   root: true,   env: {     node: true,   },   extends: ["plugin:vue/vue3-essential", "eslint:recommended"],   parserOptions: {     parser: "@babel/eslint-parser",   }, }; 

Bable配置

npm i -D @vue/cli-plugin-babel  // babel.config.js module.exports = {   presets: ["@vue/cli-plugin-babel/preset"], }; 

提供对js的变量，解决页面警告

// 解决页面警告 new DefinePlugin({   __VUE_OPTIONS_API__: "true",   __VUE_PROD_DEVTOOLS__: "false", }), 

除了以上vue中专用的配置，然后加上less，scss的loader，把前面的html插件加上去。就是一个基本的vue-cli了。完整的配置可以看最前面的仓库链接。

优化

按需引入第三库

如 elment plus 按需引入可参照其官网进行配置

https://yk2012.github.io/sgg_webpack5/
https://vue-loader.vuejs.org/zh/
https://webpack.docschina.org/