webpack 外掛程式 plugin

最近將自己看過的過使用過的webpack 外掛程式來總結一下 一、html-webpack-plugin 外掛程式

文檔： https://github.com/jantimon/html-webpack-plugin#configuration
作用：：編譯後，改變我們html檔案中引的舊js名字
用法：

npm install --save-dev html-webpack-plugin

webpack.config.js配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { plugins:[      new HtmlWebpackPlugin({        title:'Output Management' // title 名      }),   ]}

二、clean-webpack-plugin 外掛程式

文檔： https://github.com/jantimon/html-webpack-plugin(https://www.npmjs.com/package/clean-webpack-plugin)
作用： 清楚過去編譯的代碼
用法：

npm install clean-webpack-plugin --save-dev

webpack.config.js

const CleanWebpackplugin = require('clean-webpack-plugin');module.exports = {  plugins:[      new CleanWebpackplugin(['build/js']) // 清楚路徑 build/js   ]}

三、extract-text-webpack-plugin 外掛程式

文檔：https://github.com/webpack-contrib/extract-text-webpack-plugin
作用：將css樣式分離，以link 方式引入html 中
用法：

npm install --save-dev extract-text-webpack-plugin

webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin'); module:{      rules:[          {            test:/\.css$/,            use:ExtractTextPlugin.extract({              use:'css-loader'            })          },          {            test:/\.less$/,            use:ExtractTextPlugin.extract({              use:['css-loader','less-loader']            })          },      ]   },   plugins:[       new ExtractTextPlugin('styles.css')   ]

四、自動載入模組ProvidePlugin

以引入jQuery 為列

const webpack = require('webpack');plugins:[      new webpack.ProvidePlugin({        $: 'jquery',        jQuery: 'jquery',        "window.jQuery": 'jquery',        "window.$": 'jquery'      })   ]