webpack Plugins列表

最新推荐文章于 2024-09-03 10:22:04 发布

原创最新推荐文章于 2024-09-03 10:22:04 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Happypack、DllPlugin、CommonsChunkPlugin等工具优化Webpack构建流程，涵盖多线程构建、依赖管理、资源优化及压缩等方面，旨在显著提升项目构建速度。

happypack 能使得webpack进行node多线程构建项目，从而提高构建速度

const os = require('os')
const HappyPack  = require('happypack')
const happThreadPool = HappyPack.ThreadPool({size: os.cpus().length}) // 采用多进程，进程数由CPU核数决定

plugins:[
    new HappyPack({
        id: 'js',
        cache: true,
        loaders: ['babel-loader?cacheDirectory=true'],
        threadPool: happThreadPool
    }),
]

dllplugin
- 把所有的webpack的依赖关系到处成一个.json文件，然后可以下次接着用，类似于maven功能。
commons-chunk-plugin
- 的作用是用来提取项目中公共依赖模块到一个新的chunk�，一般用于抽离类库node_modules。
webpack-dev-server
- 用于跟着服务器启用一个localhost/webpack-dev-server/ ，用于热更新。
webpack-dev-middleware
- 在webpack-cli中我们会启动开发模式webpack --wactch来观察代码的改动从而进行重新构建。类似的，webpack-dev-middleware起了一个中间件的作用，用它输出的文件会存在内存里，构建速度相当快，所以�可以利用它配合服务器（如express）作为静态资源服务器（本地）用于开发
http-proxy-middleware
- webpack本地开发的时候，设置代理，后来是使用到proxyTable来解决代替了。
html-webpack-plugin
- 它会用于生成一个html文件，并将最终生成的js，css以及一些静态资源文件以script和link的形式动态插入其中。你可以自定义这个html也可以让插件生成一个新的html。

extract-text-webpack-plugin

会将你项目中的css都单独打包，不会内嵌到js bunlde中，这样css和js即可并行加载，而代价就是额外的http请求。

module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
},
plugins: [
    new ExtractTextPlugin({
        filename: 'css/[name].[contenthash].css'
    })
]

optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin对css文件进行优化和最小化操作

plugins: [
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
    })
]

uglifyjs-webpack-plugin

uglifyjs-webpack-plugin对js文件进行压缩并且结合tree shaking删除未引用代码

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
            drop_console: true
        },
        sourceMap: true
    })
]

imagemin-webapack-plugin

imagemin-webapack-plugin顾名思义就是对项目中的图片进行压缩～

plugins: [
    new ImageminPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i,
        disable: process.env.NODE_ENV !== 'production', // Disable during development
        pngquant: {
            quality: '90-100'
        },
        gifsicle: {
            optimizationLevel: 2,
            interlaced: true
        },
        optipng: {
            optimizationLevel: 4,
        },
        jpegtran: {
            progressive: true
        }
    }),
]

copy-webpack-plugin

对资源进行拷贝，例如一些静态资源直接拷贝到打包后的文件夹中

new CopyWebpackPlugin([
        {
            from :'html',
            to:'html'
        },
        {
            context: 'global/img',
            from: '**/*',
            to:'img/common'
        },
        {
            from: 'img',
            to:'img'
        },
        {
            from :'global/lib/es5-shim-sham.js'
        }
])