插件Plugins

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成很多丰富的功能。
如果我们需要在webpack中引入插件时，首先我们需要npm/cnpm安装需要的插件(内置插件不用安装)，其次要在webpack配置文件webpack.config.js中的plugins关键字部分添加该插件的一个实例去配置这个插件，需要注意的是：“plugins是一个数组”。
这里就以添加一个版本声明的插件为例，在webpack.config.js中配置版本说明。

const webpack = require(‘webpack’); // 引入webpack
module.exports = {
// 配置插件
plugins: [
new webpack.HotModuleReplacementPlugin(),//热更新
]
}
抽离css文件
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
//css下的文件
new MiniCssExtractPlugin({
//要放文件的位置名称
filename: ‘./css/style.css’
}),

//清楚重复文件

    const { CleanWebpackPlugin } = require('clean-webpack-plugin');<br />        new CleanWebpackPlugin(),

// 配置vue文件

     const { VueLoaderPlugin } = require('vue-loader');<br />        new VueLoaderPlugin(),

//抽离HTML插件的基本作用就是生成html文件

  var HtmlWebpackPlugin = require('html-webpack-plugin');<br />        new HtmlWebpackPlugin({<br />            template:'./public/index.html'<br />        }),

//多张图片合成精灵图 博客园

var SpritesmithPlugin = require(‘webpack-spritesmith’);

new SpritesmithPlugin({
/
目标小图标，这里就是你需要整合的小图片的老巢。
现在是一个个的散兵，把他们位置找到，合成一个
/
src: {
//查找全部图片的根目录
cwd: path.resolve(dirname, ‘./src/assets/images/icons’),
//所有png格式下的照片
glob: ‘*.png’
},
// 输出雪碧图文件及样式文件，这个是打包后，自动生成的雪碧图和样式，自己配置想生成去哪里就去哪里
target: {
image: path.resolve(dirname, ‘./src/assets/images/sprite[hash].png’),
css: [
//输出scss位置
[path.resolve(dirname, ‘./src/assets/css/sprite.scss’), {
// 引用自己的模板
format: ‘function_based_template’
}],
]
},
// 自定义模板入口，我们需要基本的修改webapck生成的样式，上面的大函数就是我们修改的模板
customTemplates: {
‘function_based_template’: path.resolve(dirname, ‘scss.template.hbs’),scss.template.hbs
},
// 样式文件中调用雪碧图地址写法（Readme这么写的）
apiOptions: {
cssImageRef: ‘~sprite.png’
},
// 让合成的每个图片有一定的距离，否则就会紧挨着，不好使用
spritesmithOptions: {
padding: 20
}
})

//提示成功如失败其他不显示

npm install friendly-errors-webpack-plugin —save-dev
var FriendlyErrorsWebpackPlugin = require(‘friendly-errors-webpack-plugin’);
new FriendlyErrorsPlugin({
// 运行成功
compilationSuccessInfo：{
message：[‘你的应用程序在这里运行http：// localhost：3000’]，
notes：[‘有些附加说明要在成功编辑时显示’]
},
// 运行错误
onErrors：function（severity，errors）{
//您可以收听插件转换和优先级的错误
//严重性可以是’错误’或’警告’
},
//是否每次编译之间清除控制台
//默认为true
clearConsole：true,
//添加格式化程序和变换器（见下文）
additionalFormatters: [],
additionalTransformers: []
})