webpack中常用的几个插件配置

• 安装cross-env包，通过cross-env模块设置环境变量

  {
    "scripts": {
        "build": "cross-env NODE_ENV=production webpack --mode production",
        "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development",
    }
  }

## webpack-dev-server
  编译命令：webpack-dev-server --open --mode development
  >1. --open：                       //打开默认浏器，index.html
  >2. --config // 运行webpack.config.js 默认执行
  >3. --hot // 实现热替换
  >4. --inline // 实现自更新
  >5. --mode development // 开发环境模式，一定要写

 #### webpack --config xxx 运行另一份配置文件 

webpack-bundle-analyzer

用来查看打包了多少文件，文件体积大小的插件

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
在plugins中new BundleAnalyzerPlugin()

extract-text-webpack-plugin 抽离CSS样式

单独打包CSS文件，不要打包到main.js中，造成js,css混乱。如果没有加以区分，页面引入了这个js文件打开会发现css以style的形式插入到了head

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
  rules: [
    {
        test: /\.less$/,
        use:  ExtractTextPlugin.extract({
          use: [
            // 添加浏览器自动加前缀配置
            {loader: 'postcss-loader',options:{plugins:[require("autoprefixer")("last 100 versions")]}},
            "less-loader",
          ],
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
  ]
}
plugins: [
   new ExtractTextPlugin({
      filename: 'style.css',
    }), // 打包后的文件名
]