分享18个webpack插件，你千万要收藏好，留备用
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分享18个webpack插件，你千万要收藏好，留备用相关的知识，希望对你有一定的参考价值。
插件的特点
是一个独立的模块
模块对外暴露一个js 函数
函数的原型（原型）上定义了一个注入编译对象的适用方法适用 函数中需要有通过编译对象挂载的 的WebPack 事件钩子，钩子的回调中能拿到当前编译的编译对象，如果是异步编译插件的话可以拿到些回调
完成自定义子编译流程并处理complition对象的内部数据
如果异步编译插件的话，数据处理完成后执行callback。
1、HotModuleReplacementPlugin
const webpack = require('webpack')plugins: [new webpack.HotModuleReplacementPlugin(), // 热更新插件]
2、html -webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin')plugins: [newhtmlWebpackPlugin({filename: 'index.html',template: path.join(__dirname, '/index.html'),minify: {// 压缩html文件removeComments: true, // 移除html中的注释collapseWhitespace: true, // 删除空白符与换行符minifycss: true, // 压缩内联css},inject: true,}),]
true：默认值，script标签位于html文件的body底部
body：script标签置于html文件的body底部（同true）
head：script标签放在head标签内
false：不插入生成的js文件，只是单纯的生成一个html文件
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', //打包后的文件名}),],}
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'],}),],}
3、clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, '/index.html'),}),new CleanWebpackPlugin(), // 所要清理的文件夹名称]
4、提取文本Webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')plugins: [// 将css分离到/dist文件夹下的css文件夹中的index.cssnew ExtractTextPlugin('css/index.css'),]
5、迷你CSS提取插件
初步加载
不重复编译，性能更好
更容易使用
只针对CSS
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',}),],}
6、purifycss-webpack
const path = require('path')const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的cssmodule.exports = merge(common, {plugins: [new PurifyCssWebpack({paths: glob.sync(path.join(__dirname, 'src/*.html')),}),],})
7、优化CSS资产Webpack插件
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码optimization: {minimizer: [// 压缩cssnew OptimizeCSSAssetsPlugin({})]}
8、UglifyJsPlugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins: [new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false}},sourceMap: true, //是否启用文件缓存parallel: true //使用多进程并行运行来提高构建速度})
9、ParallelUglifyPlugin
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')plugins: [new ParallelUglifyPlugin({//cacheDir 用于配置缓存存放的目录路径。cacheDir: '.cache/',sourceMap: true,uglifyJS: {output: {comments: false,},compress: {warnings: false,},},}),]
10、terser-webpack-plugin
const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码optimization: {minimizer: [new TerserPlugin({parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1cache: true, // 是否缓存sourceMap: false,}),]}
11、NoErrorsPlugin
plugins: [new webpack.NoEmitOnErrorsPlugin()]
12、压缩webpack插件
const CompressionPlugin = require('compression-webpack-plugin')plugins: [new CompressionPlugin({// gzip压缩配置test: /\.js$|\.html$|\.css/, // 匹配文件名threshold: 10240, // 对超过10kb的数据进行压缩deleteOriginalAssets: false, // 是否删除原文件}),]
13、定义插件
plugins: [new webpack.DefinePlugin({DESCRIPTION: 'This Is The Test Text.',}),]// 直接引用console.log(DESCRIPTION)
14、ProvidePlugin
module.exports = {resolve: {alias: {jquery: './lib/jquery',},},plugins: [//提供全局的变量，在模块中使用无需用require引入new webpack.ProvidePlugin({$: 'jquery',react: 'react',}),],}
15、DLL插件
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,},}),],}
new webpack.DllReferencePlugin({manifest: require('../dist/vendor-manifest.json'),})
"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"}
<script type="text/JavaScript" ></script>
16、快乐包
npm i -D happypack
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'],},]}
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,}),]
17、复制webpack插件
const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = {plugins: [new CopyWebpackPlugin({patterns: [{from: 'public/js/*.js',to: path.resolve(__dirname, 'dist', 'js'),flatten: true,},],}),],}
18、忽略插件
const Webpack = require('webpack')plugins: [//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去new Webpack.IgnorePlugin(/\.\/locale/, /moment/),]
import moment from 'moment'//手动引入所需要的语言包import 'moment/locale/zh-cn'moment.locale('zh-cn')let r = moment().endOf('day').fromNow()console.log(r)
以上是关于分享18个webpack插件，你千万要收藏好，留备用的主要内容，如果未能解决你的问题，请参考以下文章