webpack开发环境和生产环境的配置区别

1.定义：

开发环境：开发人员调试开发的一种环境: 方便调试，保持高效的开发
生产环境：发布上线的环境: 让程序在生产环境中正常有效的运行

• 开发环境的需求：
  　　　　模块热更新 （本地开启服务，实时更新）
  　　　　sourceMap (代码映射，方便打包调试)
  　　　　接口代理　 (配置proxyTable解决开发环境中的跨域问题)
  　　　　代码规范检查 (代码规范检查工具)
• 生产环境的需求：
  　　　　提取公共代码　 　　
  　　　　压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)
  　　　　文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)
  　　　　去除无用的代码
• 开发环境和生产环境的共同需求：
  　　　　入口
  　　　　代码处理(loader处理)
  　　　　解析配置

2.webpack配置文件

搭建好Vue-cli脚手架之后，build文件夹会分别自动的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个webpack配置文件：

• webpack.base.conf.js：webpack的开发环境和生产环境的共有配置(开发环境和生产环境都是需要执行的配置)
• webpack.dev.conf.js：webpack的开发环境的特有配置(只在开发环境中执行，生产环境中不执行)
• webpack.prod.conf.js：webpack的生产环境的特有配置(只在生产环境中执行，开发环境中不执行)

webpack.base.conf.js配置

const path = require('path');
//清除build/dist文件夹文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//生成创建Html入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将css提取到单独的文件中
const MiniCssExtract = require('mini-css-extract-plugin');
//css压缩
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
//压缩js文件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//引入webpack
const webpack = require('webpack');

module.exports = {
//webpack 入口文件
    entry: './src/index.js',
//webpack 输出文件配置
    output: {
    //输出文件路径
        path: path.resolve(__dirname, 'dist'),
   //输出文件名
        filename: 'k-editor.[hash:8].js',
    },
  //配置插件
    plugins: [
    //使用插件清除dist文件夹中的文件
        new CleanWebpackPlugin({
            path: './dist'
        }),
    //使用插件生成Html入口文件
        new HtmlWebpackPlugin({
         //模板文件路径
            template: "./src/index.html",
        //模板文件名
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true, //删除双引号,
                collapseWhitespace: true,    //压缩成一行，
            },
            hash: true
        }),
      //提取css到style.css中
        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']//扩展名顺序
    },
   //loader加载器模块配置
    module: {
        rules: [
            {
            //正则表达式匹配.css为后缀的文件
                test: /\.css$/,
           //使用loader
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader"
                    },
                ]
         //正则表达式匹配.less为后缀的文件
         //使用lodaer来处理
            }, {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader"
                    },
                    'less-loader'
                ]
            },
            /* {
                 test: /\.js$/,
               //不包括node_modules
                 exclude: /node_modules/,
                 use: [{
                     loader: "eslint-loader",
                     options: {
                         enforce: 'pre'    //强制更改顺序，pre 前  post 后
                     }
                 }],
             },*/
            {
                test: /\.js$/,  //普通的loader
               //不包括node_modules
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader"
                }]
            },
            {
                test: /\.html$/,
                use: ['html-withimg-loader']
            },
            {
                test: /\.(gif|png|jpg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
             //图片小于10kb就是图片地址，大于正常打包成base64格式编码    
                        limit: 10000,
                       //输出路径
                        outputPath: 'img/'
                    }
                }]
            }
        ]
    },
};

webpack.dev.conf.js配置：

//引入webpack-merge插件进行合并
const {merge} = require('webpack-merge');
//引入webpack.base.conf.js文件
const base = require('./webpack.base.conf');
//引入webpack
const webpack = require('webpack');
//进行合并，将webpack.base.conf.js中的配置合并到这
module.exports = merge(base, {
   //模块参数
    mode: 'development',
    devServer: {
        contentBase: './dist',
      //端口号
        port: '8383',
        inline: true,
        historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        hot: true//允许热加载
    },
//启用source-map方便调试
    devtool: 'source-map',
    plugins: [
       //定义全局变量
        new webpack.DefinePlugin({
         //这里必须要解析成字符串进行判断，不然将会被识别为一个变量
            DEV: JSON.stringify('dev')
        })
    ]
});

webpack.prod.conf.js:

const {merge} = 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 = merge(base, {
    mode: 'production',
    optimization: {
        minimizer: [
          //压缩CSS代码
            new OptimizeCss(),
          //压缩js代码
            new UglifyJsPlugin({
              //启用文件缓存
                cache: true,
             //使用多线程并行运行提高构建速度
                parallel: true,
             //使用 SourceMaps 将错误信息的位置映射到模块
                sourceMap: true
            })
        ]
    },
    plugins:[
     //使用插件定义全局变量DEV
        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"
	  },

3.webpack区分开发环境和生产环境

在node中有一个对象process对象，它里面包括env和它的一些属性，NODE_ENV是我们自己加上去的自定义属性，用来区分环境变量，也就是通过这个变量来进行区别是开发环境还是生产环境；但是有个问题，不同电脑上设置的方式是不一样的，所以就出现了cross-env

cross-env：跨平台设置环境和使用环境变量

npm install cross-env

在webpack.base.conf.js文件中修改代码：

const NODE_ENV=process.env.NODE_ENV;

修改package.json文件：

//--config是可以设置我们执行哪个webpack文件，默认是执行webpack.config.js,但是我们现在修改文件名了，所以我们要设置一下
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", // 生产环境打包
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js" // 开发环境