HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

场景

通常情况下，我们会在打包之后，在dist 文件夹下新建一个index.html文件，引入我们打包之后的js文件，这就需要我们手动去设置引入js的文件，不是很方便的管理，尤其是在使用 hash 并且输出 多个 bundle 文件的时候。

[HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)做的事情就是不需要我们去手动写index.html 文件，它会自动帮我们生成一个 index.html并且 将我们打包的bundle js文件引入到这个index.html 中

安装

  1. npm install --save-dev html-webpack-plugin

使用

该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包

  1. var HtmlWebpackPlugin = require('html-webpack-plugin');  //1.导入
  2. var path = require('path');
  4. var webpackConfig = {
  5.   entry: 'index.js',
  6.   output: {
  7.     path: path.resolve(__dirname, './dist'),
  8.     filename: 'index_bundle.js'
  9.   },
  10.   plugins: [new HtmlWebpackPlugin()] //2.使用
  11. };

打包后，这将会产生一个包含以下内容的文件 dist/index.html：（自动生成）

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>webpack App</title>
  6.   </head>
  7.   <body>
  8.     <script src="index_bundle.js"></script>
  9.   </body>
  10. </html>

配置项

  • 指定模板

如果没有显式传入模板文件，插件内部会使用默认的一套模板来注入bundle脚本

  1. plugins: [
  2.     new HtmlWebpackPlugin({
  3.         template: './src/index.html'  //配置自己的模板
  4.     })
  5. ]
  • 指定 title
    1. plugins: [
    2. new HtmlWebpackPlugin({
    3.   title: '管理输出',
    4. }),
    5. ],

CleanWebpackPlugin

用于在下一次打包时清除之前打包的文件

场景

dist 文件夹下遗留了我们之前使用的代码，但是是不需要的文件，因为dist目录最终是实际用到的文件。
比较推荐的做法是，在每次构建前清理 /dist文件夹，这样只会生成用到的文件

安装

  1. npm install --save-dev clean-webpack-plugin

使用

webpack.config.js

  1.  const path = require('path');
  2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //1.引入
  5.  module.exports = {
  6.    entry: {
  7.      index: './src/index.js',
  8.      print: './src/print.js',
  9.    },
  10.    plugins: [
  11.     new CleanWebpackPlugin(),   //2.使用
  12.      new HtmlWebpackPlugin({
  13.        title: 'Output Management',
  14.      }),
  15.    ],
  16.    output: {
  17.      filename: '[name].bundle.js',
  18.      path: path.resolve(__dirname, 'dist'),
  19.    },
  20.  };

webpack-dev-server

webpack-dev-server 提供了一个 简单的web server ,并且具有live reloading (实时重新加载)功能

注意 : 版本问题 ，下述给出了正确的使用版本

场景

在每次编译代码时，手动运行 npm run build 会很麻烦，webpack提供了几种方式可以帮助我们在代码发生变化后自动编译代码

安装

  1. npm install --save-dev webpack-dev-server

使用

文档

  1. //版本说明
  2. "webpack": "^5.10.0",
  3. "webpack-cli": "^4.2.0",
  4. "webpack-dev-server": "^3.11.0"

webpack.config.js

  1.  const path = require('path');
  2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  3.  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5.  module.exports = {
  6.    mode: 'development',
  7.    entry: {
  8.      index: './src/index.js',
  9.      print: './src/print.js',
  10.    },
  11.    devtool: 'inline-source-map',
  12.   devServer: {                        //配置dev-server
  13.     contentBase: path.join(__dirname, 'dist')   //或者 './dist',  
  14.     //告诉服务器内容的来源，仅在需要提供静态文件时才进行配置
  15.     compress:true,          //为每个静态文件开启 gzip compression
  16.     port:8080               //指定端口号
  17.   },
  18.    plugins: [
  19.      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
  20.      new HtmlWebpackPlugin({
  21.        title: 'Development',
  22.      }),
  23.    ],
  24.    output: {
  25.      filename: '[name].bundle.js',
  26.      path: path.resolve(__dirname, 'dist'),
  27.    },
  28.  };
  30. //注：上述默认配置：将 dist 目录下的文件 serve 到 localhost:8080下

更多配置

package.json

  1. "scripts": {
  2.   "start": "webpack serve --open",
  3.    "build": "webpack"
  4.  },

npm run start 即可看到浏览器自动加载页面，更改源文件，web server 将在编译代码后自动重新加载

注意：按照官方文档配置发现会报错
image.png
解决

  1. "start": "webpack serve --open Chrome.exe"

issues https://github.com/webpack/webpack-cli/issues/2001

old version 使用 

  1. //版本确认
  3. "webpack": "^4.41.5",
  4. "webpack-cli": "^3.3.10",
  5. "webpack-dev-server": "^3.11.0"

修改配置文件，告知 dev server 从什么位置查找文件
webpack.config.js

  1.  const path = require('path');
  2.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  3.  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5.  module.exports = {
  6.    mode: 'development',
  7.    entry: {
  8.      app: './src/index.js',
  9.      print: './src/print.js',
  10.    },
  11.    devtool: 'inline-source-map',
  12.   devServer: {
  13.     contentBase: './dist',   //此项配置
  14.   },
  15.    plugins: [
  16.      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
  17.      new HtmlWebpackPlugin({
  18.        title: 'Development',
  19.      }),
  20.    ],
  21.    output: {
  22.      filename: '[name].bundle.js',
  23.      path: path.resolve(__dirname, 'dist'),
  24.    },
  25.  };

以上配置 告知 webpack-dev-server 将 dist 目录下的文件 serve 到 localhost:8080 下

webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。如果你的页面希望在其他不同路径中找到 bundle 文件，则可以通过 dev server 配置中的 publicPath 选项进行修改。

https://webpack.docschina.org/guides/development/#using-webpack-dev-server

hot module replacement

模块热替换 HMR ，它允许在运行时更新所有类型的模块，而无需完全刷新。 适用于 开发环境

场景

例如在提交表单的时候，更新某一处代码，这时候如果是重新加载的话，之前填入表单的数据会丢失。

使用

  1. //webpakc.config.js
  3. module.exports = {
  4.   devServer: {
  5.     contentBase: './dist',
  6.       hot: true,            //开启
  7.   }
  8. };
  1. index.js
  3. //是否开启了热更新
  4. if (module.hot) {
  5.   //接受热更新 
  6.  module.hot.accept(
  7.    // 中间这一段 不用写
  8.    './print.js', function() {
  9.    console.log('Accepting the updated printMe module!');}        
  10.  )
  11. }

HMR 加载样式
style-loader 自带 module.hot.accept

拓展

manifest