webpack常用插件,走起~

6,661 阅读5分钟

如果有不了解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插件,详细的例子,可以参见我的代码哦~

大前端,我们一起加油,感谢大家的观看!!!