webpack 图片压缩不起作用_webpack常用插件，走起~
如果有不了解webpack的同学，可以自行到webpack官网学习基础的配置，这里我们主要一起学习常见的插件应用。
loader用于打包文件，plugins 用于解决一些其他任务，比如去注释等等。
语法：plugins:[plugin1,plugin2,plugin3]
复制代码
数组中的参数要求是插件对象的实例，即必须new，如下：plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]复制代码
1. HTML文件生成插件：html-webpack-plugin
产生背景：多入口时，当你的 index.html 引入多个js，如果这些生成的js名称构成有 [hash] ，那么每次打包后的文件名都是变化的。
作用：HtmlWebpackPlugin 在此可以用于自动重新生成一个index.html或依据模板生成，帮你把所有生产的js文件引入到html中，最终生成到output目录。
安装：
npm install --save-dev html-webpack-plugin复制代码
配置：
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
new HtmlWebpackPlugin()
]复制代码
当然，如上是单个页面的配置，如果需要设置多个页面的配置，需要实例化多个HtmlWebpackPlugin对象，另外我们也可以对其进行参数配置：
const htmlWebPackConfig = {
title: 'Hello Webpack', // 配置模板title
template: '', // 模板来源html文件
filename: 'index.html', // 生成的模板文件名
favicon: '', // 指定页面的图标
hash: true, // 是否生成hash添加在引入文件地址的末尾 默认为true
inject: '', // 引入模板的注入位置 取值有(true/false/body/head)
minify: { // 对生成的html文件进行压缩，默认是false
collapseWhitespace: true, // 是否去除空格
removeAttributeQuotes: true, // 去掉属性引用
caseSensitive: false, // 是否大小写敏感
removeComments: true, // 去掉注释
},
cache: true, // 表示内容变化的时候生成一个新的文件， 默认true
showErrors: true, // 是否将错误信息写在页面， 默认true
chunks: ['index'], // 引入模块，指的是entry中设置的多个js,这里是执行js, 否则引入全部
};复制代码
注意：如上是为了方便表述，横向标写注释，请大家使用的时候使用严谨的json格式哦~
2. 图片压缩插件：imagemin-webpack-plugin
产生背景：图片过大，加载速度慢，浪费存储空间。
作用：批量压缩图片。
安装：
npm install --save-dev imagemin-webpack-plugin复制代码
配置：
//引入插件
var ImageminPlugin = require('imagemin-webpack-plugin').default;
//配置
plugins: [
new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production', // 开发时不启用
pngquant: {//图片质量
quality: '95-100'
}
})
]复制代码
3. 清空文件夹插件：clean-webpack-plugin
产生背景：每次进行打包需要手动清空目标文件夹。
作用：每次打包时先清空output文件夹。
安装：
npm install --save-dev clean-webpack-plugin复制代码
配置：
//引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
//清空dist文件夹
plugins: [
new CleanWebpackPlugin(['dist'])
]复制代码
4. 提供全局变量插件
产生背景：每次进行import引入全局模块，很麻烦。
作用：可以导入到全局，之后不用再在每个页面import。
无需安装：
内置插件: webpack.ProvidePlugin复制代码
配置：
//这些变量不必再import了
new webpack.ProvidePlugin({
jQuery: 'jquery',
React: 'react',
ReactDOM: 'react-dom',
Component: ['react','Component'] // 导出react模块中的Component
})复制代码
5. 公共代码抽取插件
产生背景：CommonsChunkPlugin 已弃用，使用optimization.splitChunks代替，像我们项目中会多次引用到一些公共模块，或者第三方类库，会进行重复打包。
作用：提取被重复引入的文件，单独生成一个或多个文件，这样避免在多入口重复打包文件。
安装：
无需安装，内置复制代码
配置：
optimization: {
//打包 第三方库
//打包 公共文件
splitChunks: {
cacheGroups: {
vendor:{//node_modules内的依赖库
chunks:"all",
test: /[\\/]node_modules[\\/]/,
name:"vendor",
minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取
maxInitialRequests: 5,
minSize: 0,
priority:100,
// enforce: true?
},
common: {// ‘src/js’ 下的js文件
chunks:"all",
test:/[\\/]src[\\/]js[\\/]/,//也可以值文件/[\\/]src[\\/]js[\\/].*\.js/,
name: "common", //生成文件名，依据output规则
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority:1
}
}
}
}复制代码
配合 runtimeChunk 使用：
optimization.runtimeChunk 用来提取 entry chunk 中的 runtime部分函数，形成一个单独的文件，这部分文件不经常变换，方便做缓存。
runtimeChunk将入口提取出来，这样入口文件可以很快加载，并且当哪里有改动的时候，只有改动的地方和这个文件有变化。
配置：
runtimeChunk: {
name: 'manifest'
}复制代码
6. css提取插件：mini-css-extract-plugin (生产模式)
产生背景：在进行打包时，css代码会打包到JS中，不利于文件缓存。
作用：依据每个entry生成单个css文件(将css从js中提取出来)。
安装：
npm install --save-dev mini-css-extract-plugin复制代码
配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new MiniCssExtractPlugin(),
]复制代码
注意：不要在开发模式使用，因为不支持热加载
如果单入口，不需要这个
7. css 去除无用的样式
产生背景：编写的css可能出现冗余情况。
作用：去除冗余的css代码。
安装：
npm install --save-dev purifycss-webpack复制代码
配置：
const purifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
// Make sure this is after ExtractTextPlugin!
new purifycssWebpack({
paths: glob.sync(path.resolve('./src/*.html'))
}),复制代码
注意：html文件生成 > css提取 > css摇树
8. 文件复制插件：copy-webpack-plugin
产生背景：一些静态资源(图片、字体等)，在编译时，需要拷贝到输出文件夹。
作用：用来复制文件或文件夹。
安装：
npm install --save-dev copy-webpack-plugin复制代码
配置：
// 引入
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin([
{ from: 'source', to: 'dist' },
{ from: 'other/xx.js', to: 'dist' },
]),
],
};复制代码
以上，是我比较常用的webpack插件，详细的例子，可以参见我的代码哦~
大前端，我们一起加油，感谢大家的观看！！！