webpack 打包配置NODE_ENV

这是webpack打包时的主要两个功能：

1. 清除dist文件
2. 配置 dist 打包方式 npm run dev npm run build:test npm run build:prod

1.pakage.json

安装相关功能的插件：devDependencies => {clean-webpack-plugin,cross-env}

2.webpack.base.config.js

modules.exports = {
    output: {
        path: path.join(__dirname, '../dist'),
        publicPath: '/'
    },
    plugins: [
        new webpack.Provideplugin({}),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
            }
        })
    ]
}

3.webpack.prod.config.js

const cleanWebpackPlugin = require('clean-webpack-plugin')
const Path = require('path')
modules.exports = {
    output: {
        path: path.join(__dirname, '../dist'),
        publicPath: '/dist/'
    },
    plugins: [
        new cleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, '../dist')
        })
    ]
}

4.main.js 调用

const baseUrl = {
    development: '--------', // 测试地址
    production: '--------' // 生产地址
}

baseUrl: baseUrl[process.env.NODE_ENV]

赏

1分也是爱

微信