- 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。
- 它会用于生成一个html文件,并将最终生成的js,css以及一些静态资源文件以
- 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' } ])