2.3 webpack4.0+ 之 开发生产环境 & 环境变量的配置

492 阅读2分钟

webpack 知识树

一、webpack 开发和生产环境配置

环境可分为开发和生产,那我们需要做的抽取一个公共js,在根据需求建特有开发和生产的js,并引用公共js。
基于前面的项目配置,这边建三个文件对webpack.config.custom.js进行拆分与不同js文件变量的合并。

变量的合并这边还需要使用插件webpack-merge
终端下载插件npm i webpack-merge -D;

  • 1.webpack.prod.js代码如下
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let OptCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin');
module.exports = smart(base,{
    mode:'production',
    optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptCss({})
        ]
    },
})
  • 2.webpack.dev.js代码如下
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
module.exports = smart(base,{
    mode:'development',
    devServer: {
        port:8081,  //端口
        progress:true, // 是否显示进度条
        contentBase:'./dist', // 打包输出目录
        compress:true
    },
})
  • 3.剩下的配置就留在web.base.js文件
  • 4.修改下package.jsonscripts脚本配置
"scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js"
  },

现在可以终端执行下 npm run buildnpm run dev已经区分了生产和开发环境

二、wenpack 环境变量配置

webpack 内已经定义一个 webpack.DefinePlugin插件,在这里可以定义字符串,Bool等类型环境变量!

  • 1.修改webpack.prod.js代码
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let OptCss = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin');
let webpack = require('webpack')
module.exports = smart(base,{
    mode:'production',
    optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptCss({})
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            ENV: JSON.stringify('production')
        })
    ]
})
  • 2.修改webpack.dev.js代码如下
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require('webpack')
module.exports = smart(base,{
    mode:'development',
    devServer: {
        port:8081,  //端口
        progress:true, // 是否显示进度条
        contentBase:'./dist', // 打包输出目录
        compress:true
    },
    devtool: 'eval-source-map',
    plugins: [
        new webpack.DefinePlugin({
            ENV: JSON.stringify("dev"),
            // test:'ture' BOOL类型写法
        })
    ]
})

我们在index.js 测试下这个环境变量是否已经成功定义了。

let url = ''
let env = ENV
if (env === 'dev') {
    url = 'http://localhost:8081'
    console.log('dev:' + url);
}else {
    url = 'http://www.baidu.com'
    console.log('production:' + url)
}

在使用了eslint检测后,可能会报ENV未定义

需要在未定义代码后面加入eslint-disable。 现在我们看下两个环境输出的变量结果
开发环境


生产环境

源码下载

创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b wabpack_environment

进入webpack工程目录,执行 npm install -D