欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack4 plugins 篇

程序员文章站 2022-03-23 13:43:27
"demo 代码点此" ,篇幅有限,仅介绍几个常用的。 start 什么是 plugins ? While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wi ......

,篇幅有限,仅介绍几个常用的。

start


什么是 plugins ?

while loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

plugins 可用于执行范围更广的任务,如打包优化,资源管理和重新定义环境中的变量。

htmlwebpackplugin


该插件将为你生成一个 html5 文件, 并帮你引入 webpack 打包好的 js 等文件.

安装:

npm i -d html-webpack-plugin

在 webpack.config.js 中配置:

const path = require('path');
+ const htmlwebpackplugin = require('html-webpack-plugin');

module.exports = {
  // mode: 'production',
  mode: 'development',
  // 入口
  // entry: './src/index.js',
  entry: {
    main: './src/index.js',
  },
  module: {...},
+  plugins: [
+    new htmlwebpackplugin({
+      title: 'webpack4 plugins 篇',
+      template: './src/index.html'
+    }),
+  ],
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

然后在 src 目录下创建 index.html 作为模板:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title><%= htmlwebpackplugin.options.title %></title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

cleanwebpackplugin


用于删除/清除构建文件夹的 webpack 插件,其实就是打包前先把 dist 文件夹清空。

依然是安装:

npm i -d clean-webpack-plugin

然后配置:

// webpack.config.js

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
+ const { cleanwebpackplugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js',
  },
  module: {...},
  plugins: [
    new htmlwebpackplugin({
      title: 'webpack4 plugins 篇',
      template: './src/index.html'
    }),
+    new cleanwebpackplugin(),
  ],
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

hotmodulereplacementplugin


模块热替换插件,即 hmr,webpack4 自带插件,无需安装,在开发者模式下配合devserver使用。

注意: 永远不要在生产环境(production)下启用 hmr

安装 webpack-dev-server:

npm i -d webpack-dev-server

配置:

// webpack.config.js

...
+ const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js',
  },
  module: {...},
  plugins: [
    new htmlwebpackplugin({
      title: 'webpack4 plugins 篇',
      template: './src/index.html'
    }),
    new cleanwebpackplugin(),
+   new webpack.hotmodulereplacementplugin(),
  ],
+  devserver: {
+    contentbase: path.resolve(__dirname, "dist"),
+    // 启用 gzip
+    compress: true,
+        open: true,
+    port: 9000,
+    hot: true,
+    hotonly: true,
+  },
  // 出口
  output: {...},
}

然后在 package.josn 中的 script 里配置命令,方便实用。

// package.json
...
"scripts": {
+ "start": "webpack-dev-server",
  "bundle": "webpack"
},
...

然后跑命令:

npm start

接着修改 index.less,切回浏览器,你会发现 css 效果已经改了。

可以试试修改 js 模块看看效果,修改 index.js:

// index.js
// 在最后面加上这段代码

...
+ if (module.hot) {
+   module.hot.accept('./components/header', () => {
+     header();
+   })
+ }

然后重新启动 webpack-dev-server,再修改 header.js:

// header.js

...
header.innertext = '修改后的header';
...

再切回浏览器,你会发现新增了一个修改过的 header。

minicssextractplugin


mini-css-extract-plugin 将css提取到单独的文件中,类似功能的有 extract-text-webpack-plugin(已废弃),两者相比,mini-css-extract-plugin 的优点:

  • 异步加载
  • 没有重复的编译(性能)
  • 更容易使用
  • 特定于css

安装:

npm i -d mini-css-extract-plugin

然后配置:

// webpack.config.js

...
+ const minicssextractplugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: {...},
  module: {
    rules: [
    ...
    {
      // 打包 css、less
      test: /\.(css|less)$/,
      use: [
        // 这里一定要加
 +       {
 +         loader: minicssextractplugin.loader,
 +       },
        {
          loader: 'css-loader',
          options: {
            importloaders: 2,
          }
        },
        'less-loader',
        'postcss-loader',
      ],
    }],
  },
  plugins: [
    ...
+    new minicssextractplugin({
+      filename: 'css/[name].css',
+     chunkfilename: 'css/[id].css',
+    }),
  ],
  devserver: {...},
  // 出口
  output: {...},
}

接着执行npm run bundle打包,你会发现 css 都打包起来了。

purgecssplugin


可以去除未使用的 css,一般与 glob、glob-all 配合使用。

安装:

npm i -d purgecss-webpack-plugin glob

配置:

// webpack.config.js

...
+ const glob = require('glob');
+ const purgecssplugin = require('purgecss-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {...},
  module: {...},
  plugins: [
    ...
+    new purgecssplugin({
+      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, 
+      { 
+        // 不匹配目录,只匹配文件
+        nodir: true,
+      }),
+    }),
  ],
  devserver: {...},
  // 出口
  output: {...},
}

optimizecssassetswebpackplugin


在 production 下打包,js 文件是会自动压缩的,但 css 不会,所以使用 optimize-css-assets-webpack-plugin 进行压缩 css。

安装:

npm i -d optimize-css-assets-webpack-plugin

配置:

// webpack.config.js

...
+ const optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {...},
  module: {...},
  plugins: [
    ...
+   new optimizecssassetsplugin(),
  ],
  devserver: {...},
  // 出口
  output: {...},
}

打包后,你会发现 css 文件都压缩好了。

备注


篇幅有限,所以就不多 bb 了。