webpack區分developement和production打包

一、developement和production打包區別

開發環境使用的模式是development模式

• 需要devServer可以幫助我們開啟一個服務器，里面還集成了一些HMR，（HMR的作用：只要更改了代碼就會重新打包，內容會實時展現在頁面），方面開發。
• 需要非常全面的SourceMap信息，方便調試。
• 不需要進行壓縮
  線上環境使用的是production模式
• 不需要開啟服務器
• 不需要非常全面的sourceMap信息，可以生成一個.map文件進行存儲。
• 需要對代碼進行壓縮

那么如何解決在開發和打包的切換中常常修改webpack.config.js文件內容的問題?本文提供2種方式。

二、2種方式實現分模式打包

首先，我們先在根目錄下新建3個配置文件：
webpack-dev.js：做developement模式下獨有的配置。
webpack-prod.js：做production模式下獨有的配置。
webpack-common.js：做2種模式共有的配置。
方式一：直接用不同配置文件打包。 developement模式用webpack-dev.js配置文件打包，production模式用webpack-prod.js配置文件打包。
方式二：用不同的環境變量打包。2種模式都用webpack-common.js配置文件打包,不同模式打包時，傳不同的環境變量。
不論哪種方式，我們都需要把根據環境分開的webpack-dev.js、webpack-prod.js和webpack-common.js里的配置合並使用，所以我們就需要用到webapck-merge插件，我們在控制台執行：

npm install webpack-merge -D

方式一：

1.webpack-common.js做2種模式共有的配置

webpack-common.js做2種模式共有的配置，導出。
webpack-common.js：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: {
          loader: 'file-loader',
          options: {
            name: "[name].[ext]",
            outputPath: './img',
            limit: 2048
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

2.webpack-dev.js：做developement模式下獨有的配置

webpack-dev.js做developement模式下獨有的配置，合並webpack-common.js之后導出。
webpack-dev.js:

const webpack = require('webpack')
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const devConfig = {
  //配置mode為development
  mode: 'development',
  //全面的sourceMap
  devtool: 'cheap-module-eval-source-map',
  //開啟devServer
  devServer: {
    contentBase: './dist/',
    open: true,
    hot: true,
    proxy: {
      '/api': 'http://localhost:3000'
    },
  },
  optimization: {
  //development模式下做tree shaking時，需要做如下配置，production模式不需要。
    usedExports: true
  },
  plugins: [
    //開啟熱更新
    new webpack.HotModuleReplacementPlugin()
  ],
}
module.exports = merge(commonConfig, devConfig)

3.webpack-prod.js：做production模式下獨有的配置。

webpack-prod.js做production模式下獨有的配置，合並webpack-common.js之后導出。

const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const prodConfig = {
  //配置mode為production
  mode: 'production',
  //簡潔的sourceMap
  devtool: 'cheap-module-source-map',
}
module.exports = merge(commonConfig, prodConfig)

4.pakeage.json 直接用不同配置文件打包

developement模式用webpack-dev.js配置文件打包，production模式用webpack-prod.js配置文件打包。

 "scripts": {
    "dev": "webpack-dev-server --config webpack-dev.js",
    "build": "webpack --config webpack-prod.js"
  },

方式二：

1.webpack-dev.js：做developement模式下獨有的配置

webpack-dev.js做developement模式下獨有的配置，導出。

const webpack = require('webpack')
const commonConfig = require('./webpack-common.js')
const devConfig = {
...
}
module.exports = devConfig

2.webpack-prod.js：做production模式下獨有的配置。

webpack-prod.js做production模式下獨有的配置，導出。

const commonConfig = require('./webpack-common.js')
const prodConfig = {
  ...
}
module.exports = prodConfig

3.webpack-common.js做2種模式共有的配置。

.webpack-common.js做2種模式共有的配置，並根據不同的環境變量，合並webpack-dev.js或者webpack-prod.js后導出。

...
const { merge } = require('webpack-merge')
const devConfig = require('./webpack-dev.js')
const prodConfig = require('./webpack-prod.js')
const commonConfig = {
  ...
}
//關鍵代碼
module.exports = function (env) {
  if (env && env.production) {
    return merge(commonConfig, prodConfig)
  } else {
    return merge(commonConfig, devConfig)
  }
}

4.pakeage.json 用不同的環境變量打包

2種模式都用webpack-common.js配置文件打包。production環境時傳了環境變量--env.production，告訴webpack-common.js應該合並webpack-prod.js。

"scripts": {
    "dev": "webpack-dev-server --config webpack-common.js",
    "build": "webpack --env.production --config webpack-common.js",
  },