Webpack常用Plugin总结（持续更新）

plugin是对webpack的一个扩充，类似于loader。plugin使用也是两个步骤，首先使用npm下载，然后在webpack配置对应的插件就可以了。

1.html-webpack-plugin(index.html打包)

自动生成一个index.html文件（可以指定模板）
将打包的js文件，自动通过script标签插入到body中

//插件安装
nmp install html-webpack-plugin --save-dev

//引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//在插件中配置
plugins:[
      new HtmlWebpackPlugin({
          //配置文件所在目录下面的插件
          template: 'index.html'
      })
    ]

2.uglifyjs-webpack-plugin（js代码丑化压缩）

可以压缩js文件并且丑化js代码，使之可读性变差
不建议在开发环境使用

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

plugins:[
      new UglifyjsWebpackPlugin()

    ]

3.webpack-dev-server(本地服务器)

本地服务器给予node.js，内部使用express框架，可以实现我们想要让流浪器自动刷新显示我们修改后的结果。
会将我们修改的代码重新编译，然后放入内存中，等到我们最后决定了之后可以使用npm run build映射到硬盘中
-contentBase: 为哪一个文件夹提供本地服务，默认是根文件夹
-prot: 端口号
-inline:页面实时刷新
-historyApiFallback:在SPA页面中，依赖HTML5的history

npm install --save-dev webpack-dev-server@2.9.1

devserver:{
        //服务哪个文件夹
        contentBase:'./dist',
        //是否需要实时监听
        inline: true
    }

//webpack.json
"script":{
	"dev": "webpack-dev-server --open"
}
//然后使用 npm run dev就可以启动了

4.webpack-merge(webpack.config.js抽离合并)

在webpack.config.js里面内容太多的时候进行分割，分为prod（生产环境），dev（开发环境），base（基本），然后在webpack.json中的“bulid”“dev”脚本后面增加 "–config ./build/prod.config.js"指定对应的webpackconfig。

npm install --save-dev webpack-merge

//base.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry:"./src/main.js",
  output: {
    path:path.resolve(__dirname,'dist'),
    filename: "bundle.js",
    publicPath:"dist/"
  },
  module:{
    rules:[
      {
        //正则表达式 匹配文件中的css文件
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //加载图片 小鱼limit时候就会使用base64转换
              limit: 10000,
              //取原来图片的name
              name:'img/[name].[hash:8].[ext]'
            }

          }
        ]
      },
      {
        //babel把es6转到es5
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    //alias别名
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    },
    extensions:['.js','.vue','.css']
  },
  plugins:[
    new HtmlWebpackPlugin({
      //配置文件所在目录下面的插件
      template: 'index.html'
    })
  ]
};

//prod.config.js
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
//引入插件
const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.config");
//合并webpack.config.js
module.exports = WebpackMerge(baseConfig,{
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
});