关于前端:18个webpack插件总有一款适合你的

何为插件(Plugin)？专一解决 webpack 在编译过程中的某个特定的工作的功能模块，能够称为插件。

Plugin 是一个扩展器，它丰盛了 webpack 自身，针对是 loader 完结后，webpack 打包的整个过程，它并不间接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行宽泛的工作。

Plugin 的特点

是一个独立的模块
模块对外裸露一个 js 函数
函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply办法 apply 函数中须要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到以后编译的 compilation 对象，如果是异步编译插件的话能够拿到回调 callback
实现自定义子编译流程并解决 complition 对象的外部数据
如果异步编译插件的话，数据处理实现后执行 callback 回调。

模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件扭转时更新打包文件或者 reload 刷新整个页面，HRM 是只更新批改的局部。

HotModuleReplacementPlugin是 webpack 模块自带的，所以引入 webpack 后，在 plugins 配置项中间接应用即可。

const webpack = require('webpack')

plugins: [new webpack.HotModuleReplacementPlugin(), // 热更新插件
]

生成 html 文件。将 webpack 中 entry 配置的相干入口 chunk 和 extract-text-webpack-plugin抽取的 css 款式插入到该插件提供的 template 或者 templateContent 配置项指定的内容根底上生成一个 html 文件，具体插入方式是将款式 link 插入到 head 元素中，script插入到 head 或者 body 中。

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.join(__dirname, '/index.html'),
    minify: {
      // 压缩 HTML 文件
      removeComments: true, // 移除 HTML 中的正文
      collapseWhitespace: true, // 删除空白符与换行符
      minifyCSS: true, // 压缩内联 css
    },
    inject: true,
  }),
]

inject 有四个选项值

true：默认值，script 标签位于 html 文件的 body 底部
body：script 标签位于 html 文件的 body 底部（同 true）
head：script 标签位于 head 标签内
false：不插入生成的 js 文件，只是单纯的生成一个 html 文件

多页利用打包

有时，咱们的利用不肯定是一个单页利用，而是一个多页利用，那么如何应用 webpack 进行打包呢。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    index: './src/index.js',
    login: './src/login.js',
  },
  output: {path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:6].js',
  },
  //...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', // 打包后的文件名
    }),
    new HtmlWebpackPlugin({
      template: './public/login.html',
      filename: 'login.html', // 打包后的文件名
    }),
  ],
}

如果须要配置多个 HtmlWebpackPlugin，那么 filename 字段不可缺省，否则默认生成的都是 index.html。

然而有个问题，index.html 和 login.html 会发现，都同时引入了 index.f7d21a.js 和 login.f7d21a.js，通常这不是咱们想要的，咱们心愿 index.html 中只引入 index.f7d21a.js，login.html 只引入 login.f7d21a.js。

HtmlWebpackPlugin 提供了一个 chunks 的参数，能够承受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html', // 打包后的文件名
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      template: './public/login.html',
      filename: 'login.html', // 打包后的文件名
      chunks: ['login'],
    }),
  ],
}

这样执行 npm run build，能够看到 index.html 中仅引入了 index 的 js 文件，而 login.html 中也仅引入了 login 的 js 文件。

clean-webpack-plugin 用于在打包前清理上一次我的项目生成的 bundle 文件，它会依据 output.path 主动清理文件夹；这个插件在生产环境用的频率十分高，因为生产环境常常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹十分宏大。

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

plugins: [
  new HtmlWebpackPlugin({template: path.join(__dirname, '/index.html'),
  }),
  new CleanWebpackPlugin(), // 所要清理的文件夹名称]

将 css 成生文件，而非内联。该插件的次要是为了抽离 css 款式, 避免将款式打包在 js 中引起页面款式加载错乱的景象

const ExtractTextPlugin = require('extract-text-webpack-plugin')

plugins: [
  // 将 css 拆散到 /dist 文件夹下的 css 文件夹中的 index.css
  new ExtractTextPlugin('css/index.css'),
]

将 CSS 提取为独立的文件的插件，对每个蕴含 css 的 js 文件都会创立一个 CSS 文件，反对按需加载 css 和 sourceMap。只能用在 webpack4 中，比照另一个插件 extract-text-webpack-plugin 有以下特点:

异步加载
不反复编译，性能更好
更容易应用
只针对 CSS

这个插件应该只用在生产环境配置，并且在 loaders 链中不应用 style-loader, 而且这个插件临时不反对 HMR

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {test: /\.(le|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {publicPath: '../',},
          },
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[id].[contenthash:8].css',
    }),
  ],
}

有时候咱们 css 写得多了或者反复了，这就造成了多余的代码，咱们心愿在生产环境进行去除。

const path = require('path')
const PurifyCssWebpack = require('purifycss-webpack') // 引入 PurifyCssWebpack 插件
const glob = require('glob') // 引入 glob 模块, 用于扫描全副 html 文件中所援用的 css

module.exports = merge(common, {
  plugins: [
    new PurifyCssWebpack({paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
  ],
})

咱们心愿减小 css 打包后的体积，能够用到 optimize-css-assets-webpack-plugin。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩 css 代码

optimization: {
  minimizer: [
    // 压缩 css
    new OptimizeCSSAssetsPlugin({})
  ]

uglifyJsPlugin 是 vue-cli 默认应用的压缩代码形式，用来对 js 文件进行压缩，从而减小 js 文件的大小，减速 load 速度。它应用的是单线程压缩代码，打包工夫较慢，所以能够在开发环境将其敞开，生产环境部署时再把它关上。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {warnings: false}
    },
    sourceMap: true,  // 是否启用文件缓存
    parallel: true   // 应用多过程并行运行来进步构建速度
  })

开启多个子过程，把对多个文件压缩的工作别离给多个子过程去实现，每个子过程其实还是通过 UglifyJS 去压缩代码，然而变成了并行执行。

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins: [
  new ParallelUglifyPlugin({
    //cacheDir 用于配置缓存寄存的目录门路。cacheDir: '.cache/',
    sourceMap: true,
    uglifyJS: {
      output: {comments: false,},
      compress: {warnings: false,},
    },
  }),
]

Webpack4.0 默认是应用 terser-webpack-plugin 这个压缩插件，在此之前是应用 uglifyjs-webpack-plugin，两者的区别是后者对 ES6 的压缩不是很好，同时咱们能够开启 parallel 参数，应用多过程压缩，放慢压缩。

const TerserPlugin = require('terser-webpack-plugin') // 压缩 js 代码

optimization: {
  minimizer: [
    new TerserPlugin({parallel: 4, // 开启几个过程来解决压缩，默认是 os.cpus().length - 1
      cache: true, // 是否缓存
      sourceMap: false,
    }),
  ]
}

报错但不退出 webpack 过程。编译呈现谬误时，应用 NoEmitOnErrorsPlugin 来跳过输入阶段。这样能够确保输入资源不会蕴含谬误。

plugins: [new webpack.NoEmitOnErrorsPlugin()]

所有古代浏览器都反对 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载工夫，缩小首次白屏工夫，晋升用户体验。

gzip 对基于文本格式文件的压缩成果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对曾经压缩过的资源（如：图片）进行 gzip 压缩解决，成果很不好。

const CompressionPlugin = require('compression-webpack-plugin')

plugins: [
  new CompressionPlugin({
    // gzip 压缩配置
    test: /\.js$|\.html$|\.css/, // 匹配文件名
    threshold: 10240, // 对超过 10kb 的数据进行压缩
    deleteOriginalAssets: false, // 是否删除原文件
  }),
]

当然，这个办法还须要后端配置反对。

咱们能够通过 DefinePlugin 能够定义一些全局的变量，咱们能够在模块当中间接应用这些变量，无需作任何申明，DefinePlugin 是 webpack 自带的插件。

plugins: [
  new webpack.DefinePlugin({DESCRIPTION: 'This Is The Test Text.',}),
]

// 间接援用
console.log(DESCRIPTION)

主动加载模块。任何时候，当 identifier 被当作未赋值的变量时，module 就会主动被加载，并且 identifier 会被这个 module 输入的内容所赋值。这是 webpack 自带的插件。

module.exports = {
  resolve: {
    alias: {jquery: './lib/jquery',},
  },
  plugins: [
    // 提供全局的变量，在模块中应用无需用 require 引入
    new webpack.ProvidePlugin({
      $: 'jquery',
      React: 'react',
    }),
  ],
}

这是在一个额定的独立的 webpack 设置中创立一个只有 dll 的 bundle(dll-only-bundle)。这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相干的依赖下来的。

应用步骤如下

1、在 build 下创立 webpack.dll.config.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    vendor: [
      'vue-router',
      'vuex',
      'vue/dist/vue.common.js',
      'vue/dist/vue.js',
      'vue-loader/lib/component-normalizer.js',
      'vue',
      'axios',
      'echarts',
    ],
  },
  output: {path: path.resolve('./dist'),
    filename: '[name].dll.js',
    library: '[name]_library',
  },
  plugins: [
    new webpack.DllPlugin({path: path.resolve('./dist', '[name]-manifest.json'),
      name: '[name]_library',
    }),
    // 倡议加上代码压缩插件，否则 dll 包会比拟大。new webpack.optimize.UglifyJsPlugin({
      compress: {warnings: false,},
    }),
  ],
}

2、在 webpack.prod.conf.js 的 plugin 前面退出配置

new webpack.DllReferencePlugin({manifest: require('../dist/vendor-manifest.json'),
})

3、package.json文件中增加快捷命令(build:dll)

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build:dll": "webpack --config build/webpack.dll.conf.js"
  }

生产环境打包的时候先 npm run build:dll 命令会在打包目录下生成 vendor-manifest.json 文件与 vendor.dll.js 文件。而后 npm run build 生产其余文件。

4、根目录下的入口 index.html 退出援用

<script type="text/javascript" src="./vendor.dll.js"></script>

HappyPack 能让 webpack 把工作合成给多个子过程去并发的执行，子过程解决完后再把后果发送给主过程。要留神的是 HappyPack 对 file-loader、url-loader 反对的不敌对，所以不倡议对该 loader 应用。

1、HappyPack 插件装置

npm i -D happypack

2、webpack.base.conf.js 文件对 module.rules 进行配置

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['happypack/loader?id=babel'],
      include: [resolve('src'), resolve('test')],
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      test: /\.vue$/,
      use: ['happypack/loader?id=vue'],
    },
  ]
}

3、在生产环境 webpack.prod.conf.js 文件进行配置

const HappyPack = require('happypack')
// 结构出共享过程池，在过程池中蕴含 5 个子过程
const HappyPackThreadPool = HappyPack.ThreadPool({size: 5})
plugins: [
  new HappyPack({
    // 用惟一的标识符 id，来代表以后的 HappyPack 是用来解决一类特定的文件
    id: 'babel',
    // 如何解决.js 文件，用法和 Loader 配置中一样
    loaders: ['babel-loader?cacheDirectory'],
    threadPool: HappyPackThreadPool,
  }),
  new HappyPack({
    id: 'vue', // 用惟一的标识符 id，来代表以后的 HappyPack 是用来解决一类特定的文件
    loaders: [
      {
        loader: 'vue-loader',
        options: vueLoaderConfig,
      },
    ],
    threadPool: HappyPackThreadPool,
  }),
]

留神，当我的项目较小时，多线程打包反而会使打包速度变慢。

咱们在 public/index.html 中引入了动态资源，然而打包的时候 webpack 并不会帮咱们拷贝到 dist 目录，因而 copy-webpack-plugin 就能够很好地帮我做拷贝的工作了。

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/js/*.js',
          to: path.resolve(__dirname, 'dist', 'js'),
          flatten: true,
        },
      ],
    }),
  ],
}

这是 webpack 内置插件，它的作用是：疏忽第三方包指定目录，让这些指定目录不要被打包进去。

比方咱们要应用 moment 这个第三方依赖库，该库次要是对工夫进行格式化，并且反对多个国家语言。尽管我设置了语言为中文，然而在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢。对此，咱们能够用 IgnorePlugin 使得指定目录被疏忽，从而使得打包变快，文件变小。

const Webpack = require('webpack')
plugins: [
  //moment 这个库中，如果援用了./locale/ 目录的内容，就疏忽掉，不会打包进去
  new Webpack.IgnorePlugin(/\.\/locale/, /moment/),
]

咱们尽管依照下面的办法疏忽了蕴含 ’./locale/' 该字段门路的文件目录，然而也使得咱们应用的时候不能显示中文语言了，所以这个时候能够手动引入中文语言的目录。

import moment from 'moment'

// 手动引入所须要的语言包
import 'moment/locale/zh-cn'

moment.locale('zh-cn')

let r = moment().endOf('day').fromNow()
console.log(r)

原文地址

关于前端:18个webpack插件总有一款适合你的

前言

HotModuleReplacementPlugin

html-webpack-plugin

clean-webpack-plugin

extract-text-webpack-plugin

mini-css-extract-plugin

purifycss-webpack

optimize-css-assets-webpack-plugin

UglifyJsPlugin

ParallelUglifyPlugin

terser-webpack-plugin

NoErrorsPlugin

compression-webpack-plugin

DefinePlugin

ProvidePlugin

DLLPlugin

HappyPack

copy-webpack-plugin

IgnorePlugin

Just My Socks（注册教程内含优惠码）

关于前端:18个webpack插件总有一款适合你的

前言

HotModuleReplacementPlugin

html-webpack-plugin

clean-webpack-plugin

extract-text-webpack-plugin

mini-css-extract-plugin

purifycss-webpack

optimize-css-assets-webpack-plugin

UglifyJsPlugin

ParallelUglifyPlugin

terser-webpack-plugin

NoErrorsPlugin

compression-webpack-plugin

DefinePlugin

ProvidePlugin

DLLPlugin

HappyPack

copy-webpack-plugin

IgnorePlugin

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）