webpack常用插件汇总

2018-11-22 本文已影响0人陌上寒

image
webpack的plugin实在是太多了，具体的使用方法，在其github或者npm官网都可以找到
我们之前讨论过几个常用的plugin

html-webpack-plugin 参见 webpack4 之html-webpack-plugin
mini-css-extract-plugin 参见webpack4两个常用的plugin之 happypack和mini-css-extract-plugin
happypack
clean-webpack-plugin 参见删除打包文件，搞定webpack4的clean-webpack-plugin

今天结束关于webpackplugin的介绍
常用plugin汇总如下

webpack-merge

看字面的意思我们就知道这是干什么用的，没错，是用来合并的，我们的本地可能有很多环境，例如本地环境，开发环境，测试环境，生产环境等等，不同的环境webpack的配置有相同的地方，也会有不同的地方，本地启动服务开启的是devServer，没有打包这一环节，像下线上的那些环境（开发环境，测试环境，生产环境等）他们就会有很多相同的地方，同样的，这四个环境里有些配置是相同的，我们将相同的配置提取出来，放到一个单独的js文件中，一般命名为webpack.base.conf.js,然后通过webpack-merge将webpack.base.conf.js合并到其他环境中。

看下代码片段
//webpack的线上配置即webpack.prod.conf.js

const BaseConfig = require('./webpack.base.conf.js')
const merge = require('webpack-merge')
module.exports = {
    //部分代码省略
    externals: merge({}, BaseConfig.externals),
  resolve: merge({}, BaseConfig.resolve),
}

👆的例子中，线上的externals和resolve被提取出去，也就是和webpack.base.conf.js中的externals和resolve完全一致
还有个栗子🌰

const BaseConfig = require('./webpack.base.conf.js')
const merge = require('webpack-merge')
module.exports = merge(BaseConfig, {
    devtool: 'cheap-module-eval-source-map',
     //其他代码省略
})

这段代码中是将webpack.base.conf.js所有配置都合并过来。
webpack-merge的存在，无疑减少了开发量，大大提高了可读性，关于webpack-merge的配置不局限于此，获取更多具体配置参见官网，用起来真的很简单。

webpack-dashboard

webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack（尤其是使用dev server时）在命令行内诸多杂乱的信息结构，为webpack在命令行上构建了一个一目了然的仪表盘(dashboard)，其中包括构建过程和状态、日志以及涉及的模块列表。有了它，你就可以更加优雅的使用webpack来构建你的代码。
简单地说，webpack-dashboard就是把原先你使用webpack时（特别是使用webpack dev server时）命令行控制台打印的日志进行优化显示
[图片上传失败...(image-a9b1b7-1542899397404)]
简单的使用配置,代码片段

const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();
plugins: [
  new DashboardPlugin(dashboard.setData)
]

progress-bar-webpack-plugin

编译进度条

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 new ProgressBarPlugin()

image

copy-webpack-plugin

在webpack中拷贝文件和文件夹

new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
}]);
//作用：把public 里面的内容全部拷贝到编译目录

几个参数了解下：
from 定义要拷贝的源目录 from: __dirname + ‘/src/public’
to 定义要拷贝到的目标目录 from: __dirname + ‘/dist’
toType file 或者 dir 可选，默认是文件
force 强制覆盖先前的插件可选默认false
context 可选默认base context可用specific context
flatten 只拷贝文件不管文件夹默认是false
ignore 忽略拷贝指定的文件可以用模糊匹配

const CopyWebpackPlugin= require('copy-webpack-plugin')
plugins:[
 new CopyWebpackPlugin([
    {from: 'src/asserts', to: 'asserts/'},
    {from: 'src/data', to: 'data/'}
]),
]

上面的代码是将src下的assets文件夹拷贝到打包文件根目录下的assets下
上面的代码是将src下的data文件夹拷贝到打包文件根目录下的data下

webpack-manifest-plugin && assets-webpack-plugin

俩个插件效果一致，都是生成编译结果的资源单，只是资源单的数据结构不一致而已。
webpack-manifest-plugin 基本用法：

const ManifestPlugin = require(' webpack-manifest-plugin')
module.exports = {
  plugins: [
    new ManifestPlugin()
  ]
}

assets-webpack-plugin 基本用法：

const AssetsPlugin = require(' assets-webpack-plugin')
module.exports = {
  plugins: [
    new AssetsPlugin()
  ]
}