webpack区分developement和production打包

文章介绍了webpack在developement模式和production模式下的打包区别，并用2种方式实现了分模式打包。

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 i webpack-merge -D

1

直接用不同配置文件打包

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')
  }
}

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之后导出。

webpack-prod.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配置文件打包。

pakeage.json部分代码：

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

2

用不同的环境变量打包

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

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

webpack-dev.js：

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

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

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

webpack-prod.js：

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后导出。

webpack-common.js：

...
const { merge } = require('webpack-merge')
const devConfig = require('./webpack-dev.js')
const prodConfig = require('./webpack-prod.js')
const commonConfig = {
  ...
}
//打包时如果有env.production，那么webpack-common.js合并webpack-prod.js导出，否则合并webpack-dev.js导出。
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。

pakeage.json部分代码：

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

仙女都在看

点点点，赞和在看都在这儿！