16、webpack 根据DefinePlugin插件创建不同环

根据DefinePlugin插件创建生产和开发环境配置：

• 1、安装插件(合并插件)

yarn add webpack-merge -D

• 2、build/webpack.base.config.js

// 开发和生成模式共同的配置
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
//
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//
let webpack = require('webpack');

// webpack相关配置
module.exports = {
    // 入口,表示从哪里开始打包
    entry: {
        home: './src/index.js'
    }, 
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名 多入口根据入口名称生成
        filename: 'build.js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, '../dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html'
        }),
        // 抽离css为单独文件
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    //
    resolve: {
        // 解析三方库文件
        //modules: [ path.resolve('node_modules') ],
        // 扩展名
        extensions: ['.js', '.css', '.json', '.vue'],
        // 定义路径别名
        alias: {
            '@': path.resolve('src')
        }
    },
    module: {
        // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/, //匹配less文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/, //匹配js文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
     }
}

• 3、build/webpack.dev.config.js

// dev模式的配置
const merge = require('webpack-merge');
// const { smart } = require('webpack-merge');
// 基础配置
let base = require('./webpack.base.config');
//
let webpack = require('webpack');

// 合并基础配置扩展开发模式配置
module.exports = merge(base, {
    mode: 'development',
    devtool: 'source-map',
    //
    devServer: {
        // 端口，默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
        contentBase: './build'
    },
    plugins: [
        // 环境区分
        new webpack.DefinePlugin({
            DEV: JSON.stringify('development')
        })
    ]
})

• 4、build/webpack.pro.config.js

// 生产模式的配置
const { smart } = require('webpack-merge');
// 基础配置
let base = require('./webpack.base.config');
//
let webpack = require('webpack');

// 合并基础配置扩展生产模式配置
module.exports = smart(base, {
    //
    mode: 'production',
    // 
    plugins: [
        // 环境区分
        new webpack.DefinePlugin({
            DEV: JSON.stringify('production')
        })
    ]
})

• 5、index.js

console.log('现在环境：', DEV);