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插件，详细的例子，可以参见我的代码哦~

大前端，我们一起加油，感谢大家的观看！！！