Webpack 简书入门教程 (一) 五大焦点【entry、output、 mode、loader（正则

万魂之主

Webpack 简书进门教程 (一) 五年夜中心【entry、output、 mode、loader（正则表达式）、 plugin】、设置文件、插件、处理惩罚项目中css战图片


文章目次

• Webpack 简书进门教程 (一) 五年夜中心【entry、output、 mode、loader（正则表达式）、 plugin】、设置文件、插件、处理惩罚项目中css战图片
  
• 
  
  
  
  • 
    
    
    
    • 一. 根本观点
      
    • 
      
      
      
      • 
        
        
        
        • 1. 甚么是webpack
          
        • 2. 了解module、chunk、bundle
          
        • 3. webpack的五年夜中心
          
           
        
         
      
    • 两. webpack的简朴利用
      
    • 
      
      
      
      • 
        
        
        
        • 利用设置文件
          
           
        
         
      
    • 三. HtmlWebpackPlugin 取 CleanWebpackPlugin
      
    • 四.处理惩罚项目中的款式文件
      
    • 五.处理惩罚项目中的图片
      
      
    
  
  

  总结：
  

• 简介+五年夜中心
  
  
  
  • 正在 webpack 中，统统皆module，任何一个文件皆能够算作是module。js、css、图片等皆是module。
    
    
    
  • loader
    
    
    
    • webpack默许只能处理惩罚js、json格局的文件，而loader的感化则是将其他格局的文件，转换成webpack可以处理惩罚的文件。
      
    • 正则表达式
      
      
      
      • JavaScript（两）（语法专题+尺度库（Object Array console JSON））、毛病处理惩罚机造、编程气势派头、掌握台指令、RegExp（正则） 工具、润饰符_ChrisP3616的专客-CSDN专客
        
      • 1. /\.xxx$/

        复造代码
        上式表示婚配后缀名为xxx的文件；
        
      • 正则婚配划定规矩：
        ^ 表示字符串的开端地位
        $ 表示字符串的结束地位
        /.xxx$/中的/ /便表示正则表达式自带的。
        
      
      
    
    
  
  
• 普通流程
  
  
  
  • 利用 npm init 初初化一个项目，并装置webpack
    
  • 将之前新建的三个文件拷贝到项目中
    
  • 正在号令止中输进webpack index.js
    
  • 将index.html中引进的index.js文件改成./dist/main.js文件，正在浏览器中运转
    
    
    
    • 假设没有期望代码被紧缩，能够正在号令前面减上 --mode development，表示以开拓形式停止挨包（开拓形式没有会紧缩代码
      
    
    
  • webpack 挨包时会默许将项目根目次下的 webpack.config.js 文件当作设置文件，因而能够经由过程新建 webpack.config.js 文件去变动webpack的默许设置
    
  
  
• npm装置时-S -D感化及区分
  
  
  
  • -S
    
    
    
    • 1. 即--save（保留）
      2. 包名会被注册正在package.json的dependencies内里，正在消费情况下那个包的依靠仍然存正在

      复造代码
    
    
  • -D
    
    
    
    • 1. 即--dev（消费）
      2. 包名会被注册正在package.json的devDependencies内里，仅正在开辟情况下存正在的包用-D，如babel，sass-loader那些剖析器

      复造代码
      它们不同于 dependencies，由于它们只需装置正在开拓机器上，而无需正在消费状况中运转代码
      
    
    
  
  
• 插件Plugin
  
  
  
  • CleanWebpackPlugin：每次挨包时主动拂拭旧的文件，默许拂拭output.path目次
    
  • HtmlWebpackPlugin：天生一个html文件，主动引进挨包后的js文件
    
  • MiniCssExtractPlugin ：将 css 抽离成一个零丁的文件，然后经由过程 link 的方法引进
    
  • OptimizeCssAssetsWebpackPlugin：为了裁减文件体积，普通我们会对 css 文件停止紧缩
    
  
  
• loader处理惩罚项目中的款式文件css
  
  
  
  • webpack 默许是没法处理惩罚 css 文件的，因而需求利用 css-loader 去处理惩罚项目中的 css 文件新建 css 文件，正在 js 中引进，必然要正在 js 中引进（无需正在 html 中引进）
    
  • 利用loader需求正在webpack设置文件的module.rules中设置
    
  • 步伐
    
    
    
    • 装置 css-loader，并正在设置文件中增加设置
      
    • 装置 style-loader，持续修正设置
      
      
      
      • style-loader 的感化是将 css 插进到 head 里的 style 标签中
        
      
      
    • 施行挨包号令，正在浏览器中翻开 index.html 文件
      
    
    
  
  
• loader处理惩罚项目中的照片
  
  
  
  • file-loader
    
    
    
    • 只要 css 引进的 bg.jpeg 被挨包输出，而且引进的图片途径也被交换成了挨包后的途径，js 及 html 间接引进的图片皆存正在成绩
      
    • 关于经由过程 js 静态增加的图片，我们可使用 require() 办法去引进
      
    • 修正 file-loader 参数（处理js引进图片）
      
    
    
  • html-loader
    
    
    
    • 关于 html 中的图片,我们可使用 html-loader 或 html-withimg-loader 去处理惩罚.
      
    • 所以当 html 中存正在 ejs 语法时，我们不克不及利用 html-loader 去处理惩罚图片，而是间接利用 ejs 语法去引进
      
    
    
  • 布置
    
    
    
    • 今朝为行，我们一切的文件皆是输出到 dist 目次下的，未便于以后的公布上线
      
    • 比方 css 文件输出到 style 目次，图片输出到 images 目次，js 输出到 js 目次…
      
    • 修正 webpack 设置从头挨包
      
    
    
  • url-loader
    
    
    
    • 利用 url-loader 代替 file-loader，url-loader 会将体积较小的图片停止 base64 编码挨包进文件中，裁减收集恳求次数
      
    
    
  • image-webpack-loader
    
    
    
    • 对图片停止紧缩
      
    
    
  
  

一. 根本观点

1. 甚么是webpack

Webpack是一个模块化的挨包东西，它按照模块的依靠干系停止静态阐发，然后将那些模块根据指定的划定规矩天生对应的静态资本

2. 了解module、chunk、bundle

正在 webpack 中，统统皆module，任何一个文件皆能够算作是module。js、css、图片等皆是module。
webpack 会将进口文件和它的依靠引进到一个 chunk （年夜块）中，然落后过一系列处理惩罚挨包成bundle（绑缚）。

3. webpack的五年夜中心

(1) entry
webpack挨包的进口，其与值能够是字符串，数组大概一个工具

1. // 单进口单文件
2. entry: "./src/index.js"
4. // 单进口多文件
5. entry: ["./ src/index.js", "./src/common.js"] // 若index.js取common.js出有依靠干系，能够经由过程此方法将它们挨包正在一同
7. // 多进口
8. entry: {
9.   page1: "./src/page1.js",  //page1战page2即为key值
10.   page2: "./src/page2.js"
11. }

复造代码

(2) output
webpack挨包的输出，经常使用设置以下

1. output: {
2.   path: path.resolve(__dirname, "./dist"),
3.   // 单进口时（默许）
4.   // filename: "main.js",
5.   // filename: "js/main.js", // filename也能够写途径，暗示输出到 dist/js 目次下
6.   // 多进口时，因为会有多个输出，因而文件名不克不及写逝世
7.   filename: "[name].js", // name暗示chunk的称号，此处为entry中的key值
8.   chunkFilename: "[name].js", // 按需减载的模块挨包后的称号
9.   publicPath: "/" // 项目布置正在效劳器上的途径，假如正在根途径则为 /
10. }

复造代码

(3) mode
webpack挨包分为两种形式，开拓形式（development）取消费形式（production），默许为消费形式
选项形貌development会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 战 NamedModulesPlugin。production会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 战 UglifyJsPlugin.(4) loader
webpack默许只能处理惩罚js、json格局的文件，而loader的感化则是将其他格局的文件，转换成webpack可以处理惩罚的文件
利用loader需求正在webpack设置文件的module.rules中设置

1. module.exports = {
2. entry: ...,
3. output: ...,
4. module: {
5.    noParse:  /node_modules/, //疏忽剖析 node_modules 中的文件
6.    rules: [
7.      {
8.        test: /\.xxx$/, // 婚配后缀名为xxx的文件；正则婚配划定规矩：^ 暗示字符串的开端地位
9. //$ 暗示字符串的完毕地位,/\.xxx$/中的/ /便暗示正则表达式自带的
10.        // 单个loader
11.        // loader: "xxx-loader",
12.        // options: {},
13.        // 多个loader，loader的处置挨次为从后往前，因而需求劣先处置的loader放正在数组最初里
14.        // use: ["xxxx-loader", "xxx-loader"],
15.        //  假如某个loader需求设置，写成上面的格局
16.        use: [
17.          {
18.            loader: "xxxx-loader",
19.            options: {}
20.          },
21.          "xxx-loader"
22.        ],
23.        include: [path.resolve(__dirname, "./src")], // 只剖析src中的文件，能够是正则
24.        exclude: [path.resolve(__dirname, "./library")], // 疏忽library中的文件，能够是正则
25.        // 当多个划定规矩同时婚配某类文件时，可使用enforce参数指定劣先级
26.        enforce: "pre" // 劣先施行该划定规矩里的loader，post 最初施行该划定规矩里的loader
27.      },
28.      {
29.        // 当划定规矩婚配时，没有再婚配前面的划定规矩。比方某个文件婚配到了第一个划定规矩，没有再婚配前面划定规矩
30.        oneOf: [
31.          {
32.            test: /\.xxx$/,
33.            use: "xxx-loader"
34.          },
35.          {
36.            test: /\.xxx$/,
37.            use: "xxx-loader"
38.          }
39.        ]
40.      }
41.    ]
42. }
43. }

复造代码

(5) plugin
webpack插件，每个插件皆有一个特定的功用，它能处理惩罚loader没法处理惩罚的工作
插件的利用十分简朴，正在plugins数组中增加插件的真例化工具便可

1. const xxxWebpackPlugin = require("xxx-webpack-plugin");
2. module.exports = {
3.   entry: ...,
4.   output: ...,
5.   plugins: [
6.     new xxxWebpackPlugin(),
7.     new xxxxWebpackPlugin({
8.       // 插件的设置项
9.     })
10.   ]
11. }

复造代码

两. webpack的简朴利用

• 新建util.js，index.js，index.html，写进以下内乱容
  

1. // util.js
2. export const print = (str) => {
3.   console.log(str);
4. };
6. // index.js
7. import {print} from "./util";
8. print("hello webpack");
10. // index.html
11. ...
12. <!-- 正在body中引进index.js -->
13. <body>
14. <script src="./index.js"></script>
15. </body>
16. ...

复造代码

• 浏览器中翻开index.html，发明掌握台报错
  

由于浏览器是没有撑持es6的模块化语法的，那个工夫webpack就能够阐扬感化了

• 利用 npm init 初初化一个项目，并装置webpack
     

      npm i webpack webpack-cli -g // 齐局装置
  npm i webpack webpack-cli -D // 项目中装置
     

  
  

4.将之前新建的三个文件拷贝到项目中，规划以下

• 正在号令止中输进webpack index.js
  

index.js表示进口文件，因为webpack的默许输出为dist/main.js，所以不消指定出心，也能够利用 webpack entry -o output 去指定出心
施行号令后会发明左边天生了一个dist文件夹和main.js文件

• 将index.html中引进的index.js文件改成./dist/main.js文件，正在浏览器中运转
  

成功运转，出有报错
翻开main.js会发明，里面的代码是被紧缩过的，假设没有期望代码被紧缩，能够正在号令前面减上 --mode development，表示以开拓形式停止挨包（开拓形式没有会紧缩代码）
利用设置文件

每次挨包时皆输进一少串号令十分烦琐，能够正在package.json中增加剧本，以下图

然后经由过程npm run build:dev 或 npm run build:pro 挨包（build:dev 取 build:pro 为自界说称号）
webpack 挨包时会默许将项目根目次下的 webpack.config.js 文件当作设置文件，因而能够经由过程新建 webpack.config.js 文件去变动webpack的默许设置

1. // webpack.config.js
2. module.exports = {
3.   //mode: "development", // 由于正在package.json剧本指定了挨包形式，以是无需设置
4.   entry: "./src/index.js",
5.   output: {
6.     path: path.resolve(__dirname, "./dist"),
7.     filename: "main.js",
8.   }
9. }

复造代码

三. HtmlWebpackPlugin 取 CleanWebpackPlugin

将 index.html 复造一份到 dist 目次中来，并修正其引进的 main.js 途径为准确的相对途径
新建 server.js 文件，增加以下代码（利用的是NodeJS中的express框架）

1. const express = require("express"); // 先装置 npm i express -D
2. const path = require("path");
3. const app = express();
4. app.use(express.static(path.resolve(__dirname, "dist"), {maxAge: 3600000}))
5. app.listen(3000);

复造代码

号令止输进 node server.js，然后正在浏览器翻开 127.0.0.1:3000，结果以下

修正 index.js 中 print 函数的参数为 “hello node”，从头挨包改革页里

挨印结果并出有更新，由于浏览器强缓存见效，出有来恳求新的文件。而缓存是基于 url 的，只需 url 变了，缓存便会生效，我们只需求修正 js 的文件名即可以修正对应的 url，因而我们期望挨包后的文件名按照文件内乱容静态天生，此时我们能够修正设置为

1. module.exports = {
2.   entry: "./src/index.js",
3.   output: {
4.     path: path.resolve(__dirname, "./dist"),
5.     filename: "[chunkhash:10].js", // chunk内乱容的hash值，前面会具体引见
6.   }
7. }

复造代码

挨包改革页里（记得修正 ./dist/index.html 中引进的 js 文件名）

能够发明，文件名发作了变革，缓存的成绩也顺利处理了。可是文件名的变革却激发了两个新的成绩

• 每次挨包皆要脚动修正 html 中引进的 js 文件名
  
• 新的文件没有会笼盖旧的文件，输出目次中的文件愈来愈多
  

HtmlWebpackPlugin 取 CleanWebpackPlugin 即可觉得我们处理那两个成绩

  npm i html-webpack-plugin clean-webpack-plugin -D

CleanWebpackPlugin：每次挨包时主动拂拭旧的文件，默许拂拭output.path目次
HtmlWebpackPlugin：天生一个html文件，主动引进挨包后的js文件
正在config中增加plugins设置

1. const  HtmlWebpackPlugin  = require("html-webpack-plugin");
2. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
3. module.export = {
4.   ...
5.   plugins: [
6.     new HtmlWebpackPlugin(),
7.     new CleanWebpackPlugin()
8.   ]
9. }

复造代码

终极挨包天生的html以下图，主动帮我们引进了js文件

HtmlWebpackPlugin 主动天生的html出有任何内乱容，假设需求根据已有的 html 去天生，能够给该插件指定模板，经常使用参数以下

1. module.exports = {
2.   // 那里三个进口是为理解释 HtmlWebpackPlugin 的 chunks 及 excludeChunks
3.   entry: {
4.     page1: "./src/page1.js",
5.     page2: "./src/page2.js",
6.     common: "./src/common.js"
7.   },
8.   plugins: [
9.     new HtmlWebpackPlugin({
10.       filename: "index.html", // 天生的 html 的文件名
11.       template: "index.template.html", // 指定模板
12.       title: "hello webpack", // 设置 html 的 title，能够正在 html 中经由过程 ejs 语法引进
13.       inject: true, // 默许值，script标签位于 body 底部，可选值 body、header、false(暗示没有主动引进js)
14.       hash: false, // true 暗示引进的js文件前面增加 hash 值做为参数，src="main.js?78ccc964740f25e35fca"
15.       chunks: [page1, common], // 多进口挨包会有多个文件，默许引进局部，此设置暗示只引进 page1, common
16.       minify: {
17.         collapseWhitespace: true,   // 来除空格
18.         minifyCSS: true, // 紧缩 html 内乱联的css
19.         minifyJS: true,  // 紧缩 html 内乱联的js
20.         removeComments: true,  // 移除正文
21.       }
22.     }),
23.     // 多页里需求 new 多个工具
24.     new HtmlWebpackPlugin({
25.       ...
26.       excludeChunk: [page1], // 没有需求引进page1，即只引进 page2 取
27.     })
28.   ]
29. }
31. // index.html
32. ...
33. <head>
34.   <!-- 挨包后会被交换成插件参数中的title — hello webpack -->
35.   <title><%= htmlWebpackPlugin.options.title %></title>
36. </head>
37. ...

复造代码

四.处理惩罚项目中的款式文件

webpack 默许是没法处理惩罚 css 文件的，因而需求利用 css-loader 去处理惩罚项目中的 css 文件
新建 css 文件，正在 js 中引进，必然要正在 js 中引进（无需正在 html 中引进）

1. // index.css
2. body {
3.   background-color: plum;
4. }
6. // index.js
7. ...
8. import "./index.css"

复造代码

装置 css-loader，并正在设置文件中增加设置

  npm i css-loader -D

1. module.exports = {
2.   ...
3.   module: {
4.     rules: [
5.       {
6.         test: /\.css$/,
7.         use: "css-loader"
8.       }
9.     ]
10.   }
11. }

复造代码

施行挨包号令，正在浏览器中翻开 index.html 文件

如上图所示，页里布景色出有改动，html 中也出有任何款式
css 固然被挨包到了 js 文件中，但并出有感化到对应的元素上，此时，便需求 style-loader 去处理惩罚了
装置 style-loader，持续修正设置为

  npm i style-loader -D

1. module: {
2.   rules: [
3.     {
4.       test: /\.css$/,
5.       use: ["style-loader", "css-loader"] // 从后往前，先施行css-loader，后施行style-loader
6.     }
7.   ]
8. }

复造代码

从头挨包，改革页里，终极结果以下图

由此可知，style-loader 的感化是将 css 插进到 head 里的 style 标签中
正在实践的项目开拓中，我们能够需求将 css 抽离成一个零丁的文件，然后经由过程 link 的方法引进，因而我们可使用 MiniCssExtractPlugin 插件去完成此事
装置 MiniCssExtractPlugin，并利用 MiniCssExtractPlugin.loader 交换 style-loader，修正设置以下

  npm i mini-css-extract-plugin -D

1. output: {
2.   path: path.resolve(__dirname, "./dist"),
3.   filename: "[name].js" // 为了便利了解，我们把 [chunkhash:10].js 改成 [name].js，暗示chunk 的称号
4. },
5. module: {
6.   rules: [
7.     {
8.       test: /\.css$/,
9.       use: [MiniCssExtractPlugin.loader, "css-loader"]
10.     }
11.   ]
12. }，
13. plugins: [
14.   new MiniCssExtractPlugin(),
15.   new CleanWebpackPlugin(),
16.   new HtmlWebpackPlugin({
17.     template: "index.html",
18.     title: "hello webpack"
19.   })
20. ]

复造代码

挨包后天生的文件及页里结果以下图

css 被零丁挨包到了 main.css（由于 index.css 取 index.js 属于统一个 chunk ，因而它们的chunkname 皆是 main）中，而且被天生的 html 文件利用 link 引进（HtmlWebpackPlugin 插件帮我们做了此事）
为了裁减文件体积，普通我们会对 css 文件停止紧缩，利用 OptimizeCssAssetsWebpackPlugin 插件便可
装置 OptimizeCssAssetsWebpackPlugin ，正在设置中增加

  npm i optimize-css-assets-webpack-plugin -D

1. plugins: [
2.   ...
3.   new OptimizeCssAssetsWebpackPlugin()
4. ]

复造代码

为了演示结果，正在 index.css 中随意多减面款式，然后挨包，发明输出的 css 文件内乱容被紧缩到了一止

关于 .less、.scss 等款式文件，只需求装置对应的 loader 并增加设置便可，以 less 为例

1. {
2.   test: /\.less$/,
3.   use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
4. }

复造代码

五.处理惩罚项目中的图片

取款式文件一样，webpack 默许也没法处理惩罚图片，因而需求对应的 loader 去处理惩罚
装置 file-loader，增加对应设置

  npm i file-loader -D

1. // 正在module.rules中新删
2. {
3.   test: /\.(png|jpe?g|gif|svg)$/,
4.   use: {
5.     loader: "file-loader",
6.     options: {
7.       name: "[name]-[contenthash:10].[ext]" // ext暗示文件的后缀名
8.     }
9.   }
10. }

复造代码

修正 index.html、index.css、index.js 文件并挨包，内乱容以下图

预览结果

从上里两张图能够看出，只要 css 引进的 bg.jpeg 被挨包输出，而且引进的图片途径也被交换成了挨包后的途径，js 及 html 间接引进的图片皆存正在成绩
关于经由过程 js 静态增加的图片，我们可使用 require() 办法去引进

1. photo.src = require("./images/vue.jpeg");

复造代码

挨包预览，结果以下

图片被挨包输出了，可是 src 的途径却没有准确，变成了一个 Module 工具，那是由于 file-loader 处理惩罚后的图片默许是利用 ESModule 导出的，而我们倒是利用 commonJS 去引进的。有两种方法处理那个成绩
方法一： 修正 file-loader 参数（保举，由于 html 中的处理惩罚也是利用 commonJS 引进）

方法两： 修正js中的代码以下

1. photo.src =  require("./images/vue.jpeg").default;
2. // 大概
3. import img from "./images/vue.jpeg"
4. photo.src = img;

复造代码

关于 html 中的图片，我们可使用 html-loader 或 html-withimg-loader 去处理惩罚，以 html-loader 为例
装置html-loader，并增加设置从头挨包

  npm i html-loader -D

1. {
2.     test: /\.html$/,
3.     use: "html-loader"
4. }

复造代码

至此，css、js、html 中的图片皆能被准确挨包处理惩罚，可是留意看 head 中的 title，并出有被 htmlWebpackPlugin 剖析
由于利用 html-loader 处理惩罚以后，htmlWebpackPlugin 没法剖析 html 中的 ejs 语法，而是当作 string 去输出。所以当 html 中存正在 ejs 语法时，我们不克不及利用 html-loader 去处理惩罚图片，而是间接利用 ejs 语法去引进

1. <img src="<%= require(&#39;./src/images/webpack.jpg&#39;) %>">

复造代码

今朝为行，我们一切的文件皆是输出到 dist 目次下的，未便于以后的公布上线，因而，我们期望不同规范的文件输出赴任此外目次中，比方 css 文件输出到 style 目次，图片输出到 images 目次，js 输出到 js 目次…
修正 webpack 设置从头挨包

1. // 修正 output
2. filename: "js/[name].js" // 修正前为 "[name].js"
3. // file-loader options 增加参数
4. outputPath: "images" // 输出到 dist 目次下的 images 中
5. //  MiniCssExtractPlugin 增加参数
6. new MiniCssExtractPlugin({
7.   filename: "style/[name].css"
8. })

复造代码

能够看到，文件的确被挨包到了对应的目次中，可是 css 引进的图片却出有表示，阐发一下缘故原由
图片放正在了 images 目次，css 引进的图片途径前里也主动拼上了 images/，可是因为 css 放正在了 style 目次，招致 css 取 图片的相对途径发作了变革，因而 css 引进的图片途径毛病没法表示
给 MiniCssExtractPlugin.loader 增加一个参数即可处理此成绩

1. {
2.   test: /\.css$/,
3.   use: [{
4.     loader: MiniCssExtractPlugin.loader,
5.     options: {
6.       publicPath: "../" // css 引进的资本途径前里拼上../那便是增加的参数
7.     }
8.   }, "css-loader"]
9. }

复造代码

再次挨包看结果

ok！图片展现的成绩曾经完善处理了，接下去停止些小劣化

• 利用 url-loader 代替 file-loader，url-loader 会将体积较小的图片停止 base64 编码挨包进文件中，裁减收集恳求次数
  
• 利用 image-webpack-loader 对图片停止紧缩
  

  npm i url-loader image-webpack-loader -D

1. {
2.   test: /\.(jpe?g|png|gif|svg)$/,
3.   use: [{
4.     loader: "url-loader",
5.     options: {
6.       name: "[name]-[contenthash:10].[ext]",
7.       outputPath: "images",
8.       limit: 10 * 1024, // 暗示 小于10k 的图片会被 base64 编码
9.       fallback: "file-loader", // 年夜于 10k 的图片由 file-loader 处置，默许值，可没有设置
10.       esModule: false
11.     }
12.   }, {
13.     loader: "image-webpack-loader",
14.     options: {
15.       disabled: true // 正在开辟或利用webpack-dev-server时，利用它能够放慢初初编译速率，并正在较小水平上放慢后绝编译速率（去自民圆文档）
16.     }
17.   }]
18. }

复造代码

能够看到，只要 bg.jpeg（21k 被紧缩到了 19k） 被挨包输出，而 webpack.jpg（9.9k） 取 vue.jpeg（7k） 皆被 base64 编码间接挨包进了文件中，闭于图片的处理惩罚便到此为行

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！