webpack环境 -- 开发环境和生产环境的区分

开发环境的需求:

模块热更新
sourceMap
接口代理
代码规范检查

生产环境的需求

提取公共代码
压缩混淆
文件压缩/base64编码
去除无用的代码

二者共同点:
同样的入口
同样的代码处理(loader处理)
同样的解析配置

使用webpack-merge拼接开发环境和生产环境:
配置文件:
webpack.dev.conf.js
webpack.prod.conf.js
webpack.common.conf.js

webpack.dev.conf.js

module.exports = {
  devtool:'cheap-module-source-map',
  devServer:{},
  plugins:[
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
  ]
}

webpack.prod.conf.js

module.exports = {
  plugins:[
      new PurifyWebpack({
        paths:glob.sync({
          './src/*.js'
        })
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name:'manifest'
      }),
      new HtmlInlinkChunkPlugin({
        inlineChunkd:['manifest']
      }),
      new webpack.optimize.UglifyJsPlugin(),
      new CleanWebpackPlugin(['dist']),
  ]
}

webpack.common.conf.js

const productionConfig = require('./webpack.prod.conf.js')
const delevopmentConfig= require('./webpack.dev.conf.js')

const merge = require('webpack-merge');
const ExtractTextWebpackPlugin= require('extract-text-webpack-plugin');
const HtmlWebpackPlugin= require('html-webpack-plugin');

const generateConfig = env =>{

  const extracLess = new ExtractTextWebpackPlugin({
    filename:'css/[name]-bundle.css'
  })
  const fileLoader = env==='production'
  ?[{
      loader:'file-loader',
      options:{
        name:'[name]-[hash:5].[ext]',
        outputPath:'assets/imgs/'
      }
    }]
   :[{
      loader:'url-loader',
      options:{
        name:'[name]-[hash:5].[ext]',
        limit: 1000,
        outputPath:'assets/imgs/'
      }
   }]

  const cssLoaders = [
    {
      loader:'css-loader',
      option:{sourceMap:env==='development'?true:false}
    },
    {
      loader:'postcss-loader',
      option:{
        ident:'postcss',
        plugins:[
          require('postcss-cssnext')
        ].concat(env==='production'
        ?require('postcss-sprites')({spritePath:'dist/assets/img',retina:true})
        :[])
      }
    },
    {loader:'less-loader'},
  ]
  const scriptLoader = ['babel-loader'].concat(env == 'production'?
    []:
    [{loader:'eslint-loader',options:{
      formatter: require('eslint-friendiy-formatter')
    }}]),

  ];
  const styleLoader = env === 'production'
  ?extractLess.extract({fallback:'style-loader',use:cssLoaders})
  :[{loader:'style-loader'}].concat(cssLoaders )

  return{
    entry:{},
    output:{},
    resolve:{alias:{},...},
    module:{
      rules:[
        {
          test:/\.js$/,
          use:scriptLoader
        },
        {
          test:/\.less$/,
          use:styleLoader 
        },
        {
          text:/\.(png|jpg|jpeg|gif)$/,
          use: fileLoader.concat(env === 'production'?[{
            loader:'img-loader',
            options:{
              pngquant:{quality:80}
            }
          }]:[])
        },
        {
          test:/\.(eot|woff|woff2|ttf|svg)$/,
          use:fileLoader
        }
      ]
    },
    plugins:[

      extractLess,
      new HtmlWebpackPlugin({
        filename:'index.html',
        template:'index.html',
        minify:{
          collapseWhitespace:true
        }
      }),
      new CleanWebpackPlugin(['dist']),
      new webpack.ProvidePlugin({
        $:'jquery'
      })

    ]
  }
}
module.exports = env =>{
  let config = env ==='production'?productionCOnfig: delevopmentConfig
  return merge(generateConfig(env),config)
}

scripts

“scripts”:{
“server”:”webpack-dev-server –env development –open –config build/webpack.common.config.js”,
“”build”:”webpack –env peoduction –config build/webpack.common.config.js”,
}

.babelrc

{preset:['env']}