2.1.8 webpack的环境

因为在不同的场景下可能需要不同的配置，使用不同的功能，所以要区分环境

比如：
1、开发模式
    会额外的用到一些调试功能，比如webpack-dev-server，但是为了加快调试速度，可能不会去用上压缩，tree-shaking之类的功能
2、生产模式
    为了减少文件体积，会使用压缩，tree-shaking等功能，但是不要加webpack-dev-server或者eslint这样的调试工具

如何告诉webpack当前环境

　　webpack --env envname

　　不同环境下的配置编写

　　　　1、编写一个开发环境下的配置文件

　　　　2、编写一个生产环境下的配置文件

　　　　3、在基础配置中引入开发和生产配置

　　　　4、判断env参数，合并对应的配置

webpack.common.js

const webpack = require('webpack');
const extractTextCss = require('extract-text-webpack-plugin');
const dev = require('./webpack.dev.js');
const pro = require('./webpack.pro.js');
const merge = require('webpack-merge');
module.exports = env => {
  var postPlugins = [require('autoprefixer')(), require('postcss-cssnext')()];
  postPlugins.concat(env === 'production' ? [require('postcss-sprites')({
                                              spritePath: 'dist/sprite',
                                              retina: true
                                            })]:[])
  //配置对象
  var common={
     entry:'./app.js',  
     output:{
         filename:'bundle.js'
     },
     module:{
        rules: [  
           //js处理
           {
            test:/\.js$/,
            use:
              {
                loader:'babel-loader',
              }
           },
           //css处理
           {
             test:/\.less$/,
             use:extractTextCss.extract({
              fallback:{
                 loader:'style-loader',
                 options:{
                  //insertInto:"#mydiv",
                  singleton:true,
                  //transform:"./transform.js"
                 }
               },
                use:[       
                 {
                   loader:'css-loader',
                   options:{
                     modules:{
                      localIdentName:'[path][name]_[local]_[hash:4]'
                     }                    
                   } 
                 },
                 {
                   loader:'postcss-loader',
                   options:{
                    ident:'postcss',
                    plugins:postPlugins
                   }
                 },
                 {
                  loader:'less-loader'
                 }        
                ]         
             })
           },                   
        ] 
     },
     plugins:[
        //提取额外css文件
        new extractTextCss({
          filename: env === 'production' ? 'app.bundle.css' : 'app.dev.css'
        })
     ]
  };
  //返回配置对象
  return merge(common,env==='production'?pro:dev);
}

webpack.pro.js

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports={
      optimization: {
        minimize: false
      },    
    plugins:[
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            minify: {
                collapseWhitespace: true
            },
            inject:true,
        }),             
    ]    
}

webpack.dev.js
 
const webpack = require('webpack')
module.exports={
    devtool: 'cheap-module-source-map',
    devServer: {
        port: 9001,
        overlay: true,
        hot: true,
        hotOnly: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
    ]    
}

package.json

{
  "name": "webpack-3.1.8",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --env production --config webpack.common.js",
    "dev": "webpack-dev-server --env development --config webpack.common.js"
  },
}

webpack4 中的环境区分  -- 干掉配置文件

　　webpack --mode production / develoment / none

webpack.config.js

module.exports = {
　　mode: 'production',
    entry: './app.js',
    output: {
        filename: 'bundle4.js'
    },
    module: {
        rules: [

        ]   
    },
    plugins: {

    }
}