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'
      })
   ]