后面文章中 体验了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的内容能够参考我其它的博文，继续更新中~