Webpack常用插件


clean-webpack-plugin

  • 自动清理输出目录插件
    • webpack在打包的时候，默认是将结果重写到文件当中，并不会清理文件，如果文件夹中有一些多余不用的文件，则会一直遗留。
    • 插件名称：clean-webpack-plugin
    • 安装：npm i clean-webpack-plugin -D
    • 使用的时候需要在webpack.config.js中引入，并且添加一个plugin的属性，表示使用的插件。
    • 参考文档：https://v4.webpack.docschina.org/configuration/plugins/
    • 示例代码如下： ```javascript const { CleanWebpackPlugin } = require(“clean-webpack-plugin”);

module.exports = { mode: “none”, entry: “./src/index.js”, output: { // path: path.join(__dirname, “dist”), filename: “bundle.js”, // publicPath: “dist/“, }, module: { rules: [{ test: /.md$/, use: [“html-loader”, “./markdown-loader”], }, ], }, plugins: [new CleanWebpackPlugin()], };

  2. <a name="OJ6yk"></a>
  3. #### html-webpack-plugin
  5. <a name="9laRm"></a>
  6. ##### 安装
  7. npm i html-webpack-plugin -D
  9. <a name="NwkNY"></a>
  10. ##### 执行原理：
  11. 基本原理：将webpack中的entry配置相关入口块 和 extract-text-webpack-plugin 抽取的css样式，插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将link插入到head元素中，script插入到head或body中。
  13. <a name="zMUxC"></a>
  14. ##### 配置项
  16. - **title**：生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，如下ejs模板语法形式：
  17.    - <title>{%= o.htmlWebpackPlugin.options.title %}</title>
  19. - **filename**：输出文件的文件名称，默认为**index.html**，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'html/index.html'）。
  20.    - filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
  21.    - 指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。
  22. - **template**：本地模板文件位置。
  23. - **templateContent**: string | function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。
  24. - **inject**：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。
  25.    - true或者body：所有JavaScript资源插入到body元素的底部。
  26.    - head: 所有JavaScript资源插入到head元素中。
  27.    - false： 所有静态资源css和JavaScript都不会注入到模板文件中。
  28. - **favicon**: 添加特定favicon路径到输出的html文档中，这个同title配置项，需要在模板中动态获取其路径值。
  29. - **hash**：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：
  30.    - html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
  31. - **chunks**：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
  32. - **excludeChunks**: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。
  33. - **chunksSortMode**: none | auto| function，默认auto； 允许指定的thunk在插入到html文档前进行排序。
  35. >function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序。
  37. - **xhtml**: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签。
  38. - **cache**: true|fasle, 默认true； 如果为true表示在对应的thunk文件修改后就会emit文件。
  39. - **showErrors**: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
  40. - **minify**: {....}|false；传递 html-minifier 选项给 minify 输出，false就是不使用html压缩。
  42. <a name="yEPGG"></a>
  43. ##### 注意
  45. - 在使用html-webpack-plugin插件的时候，会默认在dist目录下生成一个index.html文件，内部会自动将html文件中的src指向到dist目录下的bundle.js，在使用的时候需要注意，要注释掉配置文件中的publicPath属性。
  46. - 示例代码：
  47. ```javascript
  48. const HtmlWebpackPlugin = require("html-webpack-plugin");
  50. module.exports = {
  51.     mode: "none",
  52.     entry: "./src/index.js",
  53.     output: {
  54.         // path: path.join(__dirname, "dist"),
  55.         filename: "bundle.js",
  56.         // publicPath: "dist/",
  57.     },
  58.     module: {
  59.         rules: [{
  60.             test: /\.md$/,
  61.             use: ["html-loader", "./markdown-loader"],
  62.         }, ],
  63.     },
  64.     plugins: [new HtmlWebpackPlugin({})],
  65. };

copy-webpack-plugin

安装：
  • npm i copy-webpack-pluginn

描述：

用于拷贝文件到dist目录下。可以是相对路径也可以是绝对路径，也可以是通配符。

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    mode: "none",
    entry: "./src/index.js",
    output: {
        // path: path.join(__dirname, "dist"),
        filename: "bundle.js",
        // publicPath: "dist/",
    },
    module: {
        rules: [{
            test: /\.md$/,
            use: ["html-loader", "./markdown-loader"],
        }, ],
    },
    plugins: [
        // 最新版本语法
        // new CopyWebpackPlugin({
        //     patterns: [{ from: "./utilis", to: "./dist" }],
        // }),
          // 5.0.4版本语法
        new CopyWebpackPlugin(["utlis"]),
    ],
};

Plugin 用来解决除了资源加载以外的其他自动化工作。