webpack4.x实战七，生产模式和开发模式分开打包

生产模式中，要求css和js文件尽可能小，因此需要把css和js文件压缩；开发模式中，要便于代码的调试，不能压缩css和js文件。

使用webpack-merge

安装插件webpack-merge

npm install --save-dev webpack-merge 
复制代码

按照模式创建不同的配置文件

创建文件

webpack.prod.js:用于生产环境 
webpack.dev.js:用户开发环境
webpack.common.js:两个环境公共配置
复制代码

webpack.common.js文件内容

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");

const extractCSS = new extractTextPlugin("css/[name]-[hash].css");
module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader", // 编译后用什么loader来提取css文件
                    use: [
                        { loader: 'css-loader' },
                        {
                            //浏览器添加前缀
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: [
                                    require('autoprefixer')({
                                        broswers: ['last 5 versions']
                                    })
                                ]
                            }
                        }
                    ]
                })
            },
            {
                test: /\.less$/,
                use: extractCSS.extract({
                    fallback: "style-loader", // 编译后用什么loader来提取css文件
                    use: [
                        { loader: 'css-loader' },
                        {
                            //浏览器添加前缀
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: [
                                    require('autoprefixer')({
                                        broswers: ['last 5 versions']
                                    })
                                ]
                            }
                        },
                        { loader: 'less-loader' }
                    ]
                })
            },
            {
                test: /\.js$/,  //添加正则，处理js文件
                use: [
                    //把ES6语法转换为ES5
                    { loader: 'babel-loader', options: { "presets": ["@babel/preset-env"] } }
                ]
            },
            {
                test:/\.(png|gif|jpg)$/i,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            name:'images/[name].[ext]',
                            limit:20000,
                            publicPath:'../'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/template/index.html',
            title: 'this is webpack title'
        }),
        extractCSS
    ]
};
复制代码

webpack.dev.js文件内容

const path = require('path')
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common,{
	mode:'development', 					//开发模式
});
复制代码

webpack.prod.js文件内容

const path = require('path')
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common,{
	mode:'production', 						//生产模式
});
复制代码

修改package.json文件

  "scripts": {
    "dev": "webpack --config webpack.dev.js --progress --display-moudle  --colors --display-reasons",
    "prod": "webpack --config webpack.prod.js --progress --display-moudle  --colors --display-reasons"
  }
复制代码

执行打包

生产环境 npm run prod

开发环境 npm run dev

生产环境打包js文件会被压缩。因为没有使用css压缩插件，所以css看不出效果。

总结

使用插件webpack-merge，区分生产环境和开发环境 npm install --save-dev webpack-merge

webpack.dev.js文件内容

const path = require('path')
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common,{
	mode:'development', 					//开发模式
});
复制代码

webpack.prod.js文件内容

const path = require('path')
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common,{
	mode:'production', 						//生产模式
});
复制代码

转载于:https://juejin.im/post/5cd9621ce51d453aa10dff6d