webpack实例解析二(插件)_webpack body-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43206949/article/details/98971549

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

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

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

文件初始结构：
在这里插入图片描述

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
注释很详细就不一一赘述了

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { // 多个入口
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].[hash].js', // [name] => entry ->key [hash]生成一串hash值，用于解决浏览器的缓存问题
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '学习HtmlWebpackPlugin',
      template: './public/index.html', // 用于挂载打包后的文件的 模板（ejs,html等）,默认为lodash-template
      filename: 'index.html', // 打包后的生成的html的路径和文件名，路径的相对于 output.path的
      hash: true, //true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示
      inject: false,
      // 向templat中注入所有静态资源，不同的配置值注入的位置不经相同。
      /*  1、true或者body：所有JavaScript资源插入到body元素的底部
       2、head: 所有JavaScript资源插入到head元素中
       3、false： 所有静态资源css和JavaScript都不会注入到模板文件中 */
      favicon: './public/favicon.ico',// 配置ico图标
      minify: {// html压缩  配置：html-minifier
        removeComments: true, //去掉注释
        collapseWhitespace: true, //去掉空行
      },
      chunks: 'all', // 当有多个入口 ，输出多个html时,指定当前的fliename对应的html文件加载的js包名称（对应 entry配置的文件名 eg: ['app']）
      excludeChunks: [], // 和上面相反
      showErrors: true, // 如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。
      config: { // 自定义变量 随意配置 htmlWebpackPlugin.options 访问
        customerVar: 'ssss'
      },
    })
  ],
  module: {  // 解析除js json等外的文件类型的解析器
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

只得注意的是 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文件夹
在这里插入图片描述
可以看到js 和ico都被打包成功

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

效果如图：
在这里插入图片描述
可以看到css /js都执行了，成功了。
ico

整理页面的参数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>
  <% } %>
``