【零基础学习Webpack】webpack不同环境打包

Webpack区分环境打包

1、通过环境变量区分

• webpack --env.production

• webpack.config.js中判断env

  打包命令：webpack --env=production

  module.exports = (env, argv) => {
  	if(env.production){
        //生产环境的配置
  	}else{
  	  //开发环境的配置
  	}
  }
  

2、通过不同的配置文件区分

cnpm install webpack-merge -D

创建三个文件：webpack.base.config.js、webpack.dev.config.js， webpack.prod.config.js

2.1 webpack.base.config.js

存放基础的配置文件，

2.2 webpack.dev.config.js

// 开发配置文件

const { merge }  = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      title: '我是测试的title'
    }),
  ]
})

module.exports = devWebpackConfig

2.3 webpack.prod.config.js

// 生产环境配置文件

const { merge }  = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.config')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

const prodWebpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  plugins: [ 
    // 压缩css
    new OptimizeCssAssetsPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      title: '我是测试的title',
      minify: {
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }
    }),
  ]
})

module.exports = prodWebpackConfig

打包：webpack --config .\webpack.dev.conf.js

2.4 修改package.json

 "scripts": {
    "dev": "webpack serve --mode development",
    "build:dev": "webpack --config ./webpack.dev.conf.js",
    "build:prod": "webpack --config ./webpack.prod.conf.js"
  },

执行命令npm run build:dev即可。

3、Webpack DefinePlugin（内置函数）

为配置注入全局变量，例如：开发环境和生产环境的接口地址不同，我们可以使用webpack-definePlugin，定义不同的变量。

//引入webpack
const webpack = require('webpack')

plugins: [
    new webpack.DefinePlugin({
      // 变量值要求的是一个代码片段
      API_BASE_URL: JSON.stringify('http://XXX.com')
    }),
]

在入口文件中使用：

// eslint-disable-next-line
console.log("==========API_BASE_URL===========", API_BASE_URL)