webpack基础（十二）环境区分

环境变量的定义

比如ajax的测试环境和线上环境的url是不一致的。

内置插件webpack.DefinePlugin

 new webpack.DefinePlugin({
            DEV: "'dev'",
            FLAG: 'true',
            DEV2:JSON.stringify('production'),
            EXPRESSION:'1+1'    //取结果2到页面上，使用JSON.stringify('1+1'),使其为字符串
        })

区分不同的化境

首先，三个文件webpack.base.js,webpack.dev.js,webpack.prod.js

安装插件 webpack-merge

yarn add webpack-merge -D

webpack.base.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtract = require('mini-css-extract-plugin');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'k-editor.[hash:8].js',
    },
    plugins: [
        new CleanWebpackPlugin({
            path: './dist'
        }),
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true, //删除双引号,
                collapseWhitespace: true,    //压缩成一行，
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'style.css'
        }),
    ],
    resolve: {
        // modules: [path.resolve('node_modules')],//只在当前目录下查找
        alias: { //别名
            'bootstrap': 'bootstrap/dist/css/bootstrap.css',
        },
        // mainFields: ['style', 'main'],//优先寻找style，
        // mainFiles: [],//入口文件的名字,默认index.js
        // extensions: ['js', 'css', 'json', 'vue']//扩展名顺序
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader"
                    },
                ]
            }, {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader"
                    },
                    'less-loader'
                ]
            },
            /* {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: [{
                     loader: "eslint-loader",
                     options: {
                         enforce: 'pre'    //强制更改顺序，pre 前  post 后
                     }
                 }],
             },*/
            {
                test: /\.js$/,  //普通的loader
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader"
                }]
            },
            {
                test: /\.html$/,
                use: ['html-withimg-loader']
            },
            {
                test: /\.(gif|png|jpg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10,
                        outputPath: 'img/'
                    }
                }]
            }
        ]
    },
};

webpack.dev.js

const {smart} = require('webpack-merge');
const base = require('./webpack.base');
const webpack = require('webpack');

module.exports = smart(base, {
    mode: 'development',
    devServer: {
        contentBase: './dist',
        port: '8383',
        inline: true,
        historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        hot: true//允许热加载
    },
    devtool: 'source-map',
    plugins: [
        new webpack.DefinePlugin({
            DEV: JSON.stringify('dev')
        })
    ]
});

webpack.prod.js

const {smart} = require('webpack-merge');
const base = require('./webpack.base');

const path = require('path');
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = smart(base, {
    mode: 'production',
    optimization: {
        minimizer: [
            new OptimizeCss(),
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
            })
        ]
    },
    plugins:[
        new webpack.DefinePlugin({
            DEV:JSON.stringify('production')
        })
    ]

});

配置package.json脚本

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