关于前端:看这些-plugins-常用又简单

后面文章中 体验了 webpack 的打包、解析 css 资源、解决图片字体等文件 接下来看看 plugins 有什么作用吧~

我的项目门路如下，和上一篇 解决图片字体等文件 我的项目保持一致

demo
├─ src
│   ├─ css
│   │   ├─ index.css
│   │   └─ file.css    
│   ├─ img
│   │  ├─ portrait.png 
│   │  └─ sky.jpg        
│   ├─ js
│   │  ├─ component.js
│   │  └─ createElement.js  
│   └─ index.js
├─  index.html
├─  package.json
└─  webpack.config.js

clean-webpack-plugin

咱们通过 npm run build 来生成打包后文件夹 dist，但每次打包后是删除 dist 从新创立文件夹，还是仅笼罩同名文件呢？

答案是：仅笼罩同名文件
咱们在 dist 文件夹中新建一个 hello.txt 文件，再通过 npm run build 从新编译，发现 hello.txt 文件依然存在，也就是说 dist 文件夹没有被删除和从新创立

如果在 webpack.config.js 文件中批改配置，打包后文件名发生变化，打包文件夹不被删除，只会笼罩同名文件，会导致文件夹越来越大，除了每次手动删除，还能够应用 clean-webpack-plugin。

通过 npm i clean-webpack-plugin -D 装置依赖，在 webpack.config.js 中配置 plugin

const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {
  // 其它配置省略
  plugins: [new CleanWebpackPlugin()],
};

再次通过 npm run build 编译，发现咱们创立的 hello.txt 文件就曾经被删除，曾经能够通过 plugin 主动删除 dist 文件夹啦~

html-webpack-plugin

目前用于查看打包后果的形式是，通过我的项目根目录下的 index.html 文件，引入编译后的 js 文件，但这种形式存在两个问题。

• 当 js 文件十分多时，须要一个个引入，可能有脱漏
• 在公布线上的时候，编译后的 dist 文件夹作为动态资源，外面须要有 index.html 作为入口文件，而手动将根目录下的 index.html 挪动过来，可能须要批改大量的文件门路

html-webpack-plugin 提供了主动生成 html 文件并引入资源的性能，能够解决以上问题

通过 npm install html-webpack-plugin -D 装置依赖，并在 webpack.config.js 中配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
    }),
  ],
};

编译后入口文件 bundle.js 会被主动引入到 index.html 中

html-webpack-plugin 中 ejs 文件就是用于生成 html 的模板

但比方 vue、react 的入口 index.html 文件中须要增加 id 为 app 或者 root 的 div 标签，应用默认的 html 模板就不适合了，html-webpack-plugin 提供了自定义模板文件的选项。

将 vue 中位于 public 文件夹下 index.html 的模板文件复制过去

在 webpack.config.js 中配置自定义模板文件

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
      template: "./public/index.html",
    }),
  ],
};

再通过 npm run build 编译，但此时报错，BASE_URL is not defined

这里 BASE_URL 须要配置全局变量，要应用上面这个 plugin

DefinePlugin

DefinePlugin 存在于 webpck 的包中，不须要独自装置

const {DefinePlugin} = require("webpack");

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
      template: "./public/index.html",
    }),
    new DefinePlugin({
      // 双引号里的内容会被拿进去作为一个变量，所以 ./ 里面还要加一层引号
      BASE_URL: "'./'",
    }),
  ],
};

再次运行 npm run build，index.html 就能够通过模板生成啦

copy-webpack-plugin

在下面的 html 页面中引入了一个 favicon.ico，用于展现在网页左上角的图标，这个 icon 在 vue/react 我的项目中是搁置在 public 目录下，咱们也在 public 目录下搁置一个 icon，用于展现。

因为 public 文件下的资源是固定的，间接拷贝到编译后的文件夹引入应用就能够，这里应用 copy-webpack-plugin 来操作。

通过 npm i copy-webpack-plugin -D 装置后，在 webpack.config.js 中配置。

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

module.exports = {
  // 其它配置省略
  plugins: [
    new HtmlWebpackPlugin({
      // 自定义 index.html 的 title
      title: "hello webpack",
      template: "./public/index.html",
    }),
    new DefinePlugin({
      // 双引号里的内容会被拿进去作为一个变量，所以 ./ 里面还要加一层引号
      BASE_URL: "'./'",
    }),
    new CopyWebpackPlugin({
      // 用于匹配复制文件的规定
      patterns: [
        {from: "public",},
      ],
    }),
  ],
};

只配置复制文件起源是不够的，因为 HtmlWebpackPlugin 曾经解决了一次 html，会报错 index.html 文件抵触

在下面的 patterns 中须要加上疏忽文件的配置

patterns: [
  {
    from: "public",
    globOptions: {
      // 疏忽的文件如果在 from 属性配置的文件夹下，须要在文件名前加上 **/
      ignore: ["**/index.html"],
    },
  },
];

再次运行 npm run build，图标就曾经被复制到 dist 文件夹下，网页左上角也能胜利显示

以上通过 clean-webpack-plugin 主动删除编译后文件夹、html-webpack-plugin 配置 html 模板、definePlugin 定义全局变量、copy-webpack-plugin 复制 public 下动态资源，使我的项目资源解决更为简略。

更多无关 webpack 的内容能够参考我其它的博文，继续更新中~