陌上寒

陌上寒个人博客

webpack常用插件汇总

《webpack常用插件汇总》
webpack的plugin实在是太多了,具体的使用方法,在其github或者npm官网都可以找到
我们之前讨论过几个常用的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时)命令行控制台打印的日志进行优化显示
《webpack常用插件汇总》
简单的使用配置,代码片段

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()

《webpack常用插件汇总》

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()
  ]
}

发表评论

电子邮件地址不会被公开。