看,这些 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 文件夹没有被删除和重新创建

看,这些 plugins 常用又简单_第1张图片

如果在 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 中

看,这些 plugins 常用又简单_第2张图片

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

看,这些 plugins 常用又简单_第3张图片

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

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

看,这些 plugins 常用又简单_第4张图片

在 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

看,这些 plugins 常用又简单_第5张图片

这里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 就可以通过模板生成啦

看,这些 plugins 常用又简单_第6张图片

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文件冲突

看,这些 plugins 常用又简单_第7张图片

在上面的 patterns 中需要加上忽略文件的配置

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

再次运行 npm run build,图标就已经被复制到 dist 文件夹下,网页左上角也能成功显示

看,这些 plugins 常用又简单_第8张图片

以上通过 clean-webpack-plugin 自动删除编译后文件夹、html-webpack-plugin 配置 html 模板、definePlugin 定义全局变量、copy-webpack-plugin 复制 public 下静态资源,使项目资源处理更为简单。

更多有关webpack的内容可以参考我其它的博文,持续更新中~

你可能感兴趣的:(看,这些 plugins 常用又简单)