插件的特色
是一個獨立的模塊javascript
模塊對外暴露一個js 函數css
函數的原型（原型）上定義了一個注入編譯對象的適用方法適用 函數中須要有經過編譯對象掛載的 的WebPack 事件鉤子，鉤子的回調中能拿到當前編譯的編譯對象，若是是異步編譯插件的話能夠拿到些回調html
完成自定義子編譯流程並處理complition對象的內部數據前端
若是異步編譯插件的話，數據處理完成後執行callback。vue
一、HotModuleReplacementPlugin
const webpack = require('webpack')
plugins: [ new webpack.HotModuleReplacementPlugin(), // 熱更新插件]
二、html -webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [ newhtmlWebpackPlugin({ filename: 'index.html', template: path.join(__dirname, '/index.html'), minify: { // 壓縮html文件 removeComments: true, // 移除html中的註釋 collapseWhitespace: true, // 刪除空白符與換行符 minifycss: true, // 壓縮內聯css }, inject: true, }),]
true：默認值，script標籤位於html文件的body底部java
body：script標籤置於html文件的body底部（同true）node
head：script標籤放在head標籤內react
false：不插入生成的js文件，只是單純的生成一個html文件jquery
const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: { index: './src/index.js', login: './src/login.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash:6].js', }, //... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', //打包後的文件名 }), new HtmlWebpackPlugin({ template: './public/login.html', filename: 'login.html', //打包後的文件名 }), ],}
module.exports = { //... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', //打包後的文件名 chunks: ['index'], }), new HtmlWebpackPlugin({ template: './public/login.html', filename: 'login.html', //打包後的文件名 chunks: ['login'], }), ],}
三、clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, '/index.html'), }), new CleanWebpackPlugin(), // 所要清理的文件夾名稱]
四、提取文本Webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')
plugins: [ // 將css分離到/dist文件夾下的css文件夾中的index.css new ExtractTextPlugin('css/index.css'),]
五、迷你CSS提取插件
初步加載webpack
不重複編譯，性能更好
更容易使用
只針對CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = { module: { rules: [ { test: /\.(le|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', }, }, 'css-loader', 'postcss-loader', 'less-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[id].[contenthash:8].css', }), ],}
六、purifycss-webpack
const path = require('path')const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件const glob = require('glob') // 引入glob模塊,用於掃描所有html文件中所引用的css
module.exports = merge(common, { plugins: [ new PurifyCssWebpack({ paths: glob.sync(path.join(__dirname, 'src/*.html')), }), ],})
七、優化CSS資產Webpack插件
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 壓縮css代碼
optimization: { minimizer: [ // 壓縮css new OptimizeCSSAssetsPlugin({}) ] }
八、UglifyJsPlugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: true, //是否啓用文件緩存 parallel: true //使用多進程並行運行來提升構建速度 })
九、ParallelUglifyPlugin
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [ new ParallelUglifyPlugin({ //cacheDir 用於配置緩存存放的目錄路徑。 cacheDir: '.cache/', sourceMap: true, uglifyJS: { output: { comments: false, }, compress: { warnings: false, }, }, }),]
十、terser-webpack-plugin
const TerserPlugin = require('terser-webpack-plugin') // 壓縮js代碼
optimization: { minimizer: [ new TerserPlugin({ parallel: 4, // 開啓幾個進程來處理壓縮，默認是 os.cpus().length - 1 cache: true, // 是否緩存 sourceMap: false, }), ]}
十一、NoErrorsPlugin
plugins: [new webpack.NoEmitOnErrorsPlugin()]
十二、壓縮webpack插件
const CompressionPlugin = require('compression-webpack-plugin')
plugins: [ new CompressionPlugin({ // gzip壓縮配置 test: /\.js$|\.html$|\.css/, // 匹配文件名 threshold: 10240, // 對超過10kb的數據進行壓縮 deleteOriginalAssets: false, // 是否刪除原文件 }),]
1三、定義插件
plugins: [ new webpack.DefinePlugin({ DESCRIPTION: 'This Is The Test Text.', }),]
// 直接引用console.log(DESCRIPTION)
1四、ProvidePlugin
module.exports = { resolve: { alias: { jquery: './lib/jquery', }, }, plugins: [ //提供全局的變量，在模塊中使用無需用require引入 new webpack.ProvidePlugin({ $: 'jquery',react: 'react', }), ],}
1五、DLL插件
const path = require('path')const webpack = require('webpack')module.exports = { entry: { vendor: [ 'vue-router', 'vuex', 'vue/dist/vue.common.js', 'vue/dist/vue.js', 'vue-loader/lib/component-normalizer.js', 'vue', 'axios', 'echarts', ], }, output: { path: path.resolve('./dist'), filename: '[name].dll.js', library: '[name]_library', }, plugins: [ new webpack.DllPlugin({ path: path.resolve('./dist', '[name]-manifest.json'), name: '[name]_library', }), // 建議加上代碼壓縮插件，不然dll包會比較大。 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, }), ],}
new webpack.DllReferencePlugin({ manifest: require('../dist/vendor-manifest.json'),})
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js", "build:dll": "webpack --config build/webpack.dll.conf.js" }
<script type="text/JavaScript" src="./vendor.dll.js"></script>
1六、快樂包
npm i -D happypack
module: { rules: [ { test: /\.js$/, use: ['happypack/loader?id=babel'], include: [resolve('src'), resolve('test')], exclude: path.resolve(__dirname, 'node_modules'), }, { test: /\.vue$/, use: ['happypack/loader?id=vue'], }, ]}
const HappyPack = require('happypack')// 構造出共享進程池，在進程池中包含5個子進程const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })plugins: [ new HappyPack({ // 用惟一的標識符id，來表明當前的HappyPack是用來處理一類特定的文件 id: 'babel', // 如何處理.js文件，用法和Loader配置中同樣 loaders: ['babel-loader?cacheDirectory'], threadPool: HappyPackThreadPool, }), new HappyPack({ id: 'vue', // 用惟一的標識符id，來表明當前的HappyPack是用來處理一類特定的文件 loaders: [ { loader: 'vue-loader', options: vueLoaderConfig, }, ], threadPool: HappyPackThreadPool, }),]
1七、複製webpack插件
const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = { plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'public/js/*.js', to: path.resolve(__dirname, 'dist', 'js'), flatten: true, }, ], }), ],}
1八、忽略插件
const Webpack = require('webpack')plugins: [ //moment這個庫中，若是引用了./locale/目錄的內容，就忽略掉，不會打包進去 new Webpack.IgnorePlugin(/\.\/locale/, /moment/),]
import moment from 'moment'
//手動引入所須要的語言包import 'moment/locale/zh-cn'
moment.locale('zh-cn')
let r = moment().endOf('day').fromNow()console.log(r)
本文分享自微信公衆號 - web前端開發（web_qdkf）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。