(webpack篇)8.Development&Production模式区分打包

概念：项目开发和打包上线我们就需要设置两种模式来进行区分开发模式和生产模式

一、构建配置

思路

• 1.根据开发环境和生产环境相同配置文件提取公共部分
• 2.将不同部分配置单独生成文件，都引入公共配置文件
• 3.package.json中配置命令对应生产和开发环境打包命令

构建文件

• 1.在项目根目录下创建build文件夹
• 2.在src/build下创建webpack.common.js webpack.dev.js webpack.prod.js

二、代码构建

安装

• 1.用来合并公共配置代码 npm install -D webpack-merge

代码配置

• 1.公共文件build/webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: './src/index.js',
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: "babel-loader"
        },   
        {
            test: /\.(png|jpe?g|gif)$/i,
            use: {
                loader: 'url-loader',
                options: {
                    // 占位符
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/', // 图片打包的目录
                    limit: 204800   // 设置文件大小超过这个值的转为base64 否则打包成图片
                }
            }
        },{
            test: /\.(eot|svg|ttf|woff)$/i,
            use: {
                loader: 'file-loader'
            }
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2
                    }
                },
                'sass-loader',
                "postcss-loader"
            ]
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        filename: '[hash]_[name].js',  // 指定构建生成的文件名
        path: path.resolve(__dirname, './dist'), // 指定构建生成文件所在路径
    }
}

• 2.开发环境配置build/webpack.dev.js

const webpack = require('webpack')
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common');

const devConfig = {
    mode: 'development',   // 指定构建模式
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true
    },
    devServer: {
        hot: true,
        open: true,
        port: 8080
    }
}
module.exports = merge(commonConfig, devConfig)

• 3.生产环境配置build/webpack.prod.js

const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common');
const prodConfig = {
    mode: 'production',   // 指定构建模式
    devtool: 'cheap-module-source-map'
}
module.exports = merge(prodConfig, commonConfig)

• 4.配置启动命令package.json中

{
  ...
  "scripts": {
    "build": "webpack --config build/webpack.prod.js",
    "serve": "webpack serve --config build/webpack.dev.js"
  },
  ...
}