webpack实例解析二(插件)

淩亂°似流年 2021-10-01 00:30 394阅读 0赞

除了一中的3个参数，webpack的列一个参数plugins，可以干预打包的过程，自动化等等

文件下载：  
链接：[https://pan.baidu.com/s/1QTJhqn31uqXhnIXOdvsbyw][https_pan.baidu.com_s_1QTJhqn31uqXhnIXOdvsbyw]  
提取码：ui8k

下面以HtmlWebpackPlugin为例，  
它你能自动把打包的文件引入html，设置各种网页的需求

文件初始结构：  
![在这里插入图片描述][20190809174826221.jpg]

package.json

{
      "name": "webpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "lodash": "^4.17.15"
      },
      "devDependencies": {
        "css-loader": "^3.2.0",
        "html-webpack-plugin": "^3.2.0",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^1.0.0",
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6"
      }
    }

npm i 安装之后看看  
webpack.config.js  
注释很详细就不一一赘述了

只得注意的是 template  
如果不配置，默认会有一个 lodash-template  
你可以配置成ejs 等等  
webpack会向模板提供一些参数（变量），用于解析

以默认为例  
我们打印参数看看效果

index.html 模板文件

<!DOCTYPE html>
    <html style="font-size:20px">
    
    <head>
      <meta charset="utf-8">
      <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    
    <body>
      <div id="app">
        <p>自定义的参数：htmlWebpackPlugin.options即可访问</p>
        <%= htmlWebpackPlugin.options.config.customerVar %>
      </div>
      <p>传给模版的参数htmlWebpackPlugin</p>
      <%= JSON.stringify(htmlWebpackPlugin) %>
      <p>自定义加载js</p>
      <% for (var index in htmlWebpackPlugin.files.js) { %>
      <script src="<%=htmlWebpackPlugin.files.js[index]%>"></script>
      <% } %>
    </body>
    
    </html>

执行 npm build 的webpack的打包命令

输出dist文件夹  
![在这里插入图片描述][20190809185138115.jpg]  
可以看到js 和ico都被打包成功

看看index.html被解析成下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
可以看到css /js都执行了，成功了。  
ico  
![在这里插入图片描述][2019080919073426.jpg]

整理页面的参数htmlWebpackPlugin为下图

{
      "files": {
        "publicPath": "",
        "chunks": {
          "app": {
            "size": 545004,
            "entry": "app.1bd644ec5880422152c5.js?1bd644ec5880422152c5",
            "hash": "d37593252def7188b52e",
            "css": []
          },
          "print": {
            "size": 52,
            "entry": "print.1bd644ec5880422152c5.js?1bd644ec5880422152c5",
            "hash": "29639c44bfa84ae90ad0",
            "css": []
          }
        },
        "js": [
          "app.1bd644ec5880422152c5.js?1bd644ec5880422152c5",
          "print.1bd644ec5880422152c5.js?1bd644ec5880422152c5"
        ],
        "css": [],
        "favicon": "favicon.ico"
      },
      "options": {
        "template": "D:\\sss\\webpack\\node_modules\\_html-webpack-plugin@3.2.0@html-webpack-plugin\\lib\\loader.js!D:\\sss\\webpack\\public\\index.html",
        "filename": "index.html",
        "hash": true,
        "inject": true,
        "compile": true,
        "favicon": "D:\\sss\\webpack\\public\\favicon.ico",
        "minify": false,
        "cache": true,
        "showErrors": true,
        "chunks": "all",
        "excludeChunks": [],
        "chunksSortMode": "auto",
        "meta": {},
        "title": "学习HtmlWebpackPlugin",
        "xhtml": false,
        "config": {
          "customerVar": "ssss"
        }
      }
    }

也就是说模板中可以访问这些数据，自定义各种需求。

其实插件配置中设置成下面或不设置，模板都会加载js包

new HtmlWebpackPlugin（{
    ...eject:true
    }）

不需要这一段，只是演示模板

<% for (var index in htmlWebpackPlugin.files.js) { %>
      <script src="<%=htmlWebpackPlugin.files.js[index]%>"></script>
      <% } %>
    ``

[https_pan.baidu.com_s_1QTJhqn31uqXhnIXOdvsbyw]: https://pan.baidu.com/s/1QTJhqn31uqXhnIXOdvsbyw
[20190809174826221.jpg]: /images/20210812/5a503a2b117b4e85964299510bdefbb3.png
[20190809185138115.jpg]: /images/20210812/0a4594b30b3543268ee8ca3628154c55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/88c9d589a263426d9fa5d80596810fef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210812/323a6d5fd4364a7997e038a573f1b776.png
[2019080919073426.jpg]: /images/20210812/678b30adf04a45c9a431f56cac1f231c.png