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",
  },