webpack学习第十一步——分环境打包

dev环境webpack.dev.js

• 开发环境使用devServer 和 HMR

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    mode: "development",
    entry: {
         main: './src/index.js',
    },
    devtool: "cheap-module-eval-source-map",
    devServer: {
        contentBase: './build',
        open: true,
        port: 1314,
        hot: true,
        hotOnly: true // hmr失效时是否不刷新页面
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

prd环境使用webpack.prod.js

• 生产环境不使用devServer和HMR，打包出文件放到服务器

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    mode: "production",
    entry: {
        main: './src/index.js',
    },
    // 生产环境不用eval
    devtool: "cheap-module-source-map",
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

修改打包命令

• 修改package.json，不同的环境执行不同的打包命令

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
},

webpack.common.js

• webpack.dev.js 和 webpack.prod.js 中有很多通用的地方，所以我们可以将公告部分提取出来

• 新建webpack.common.js,将公共的配置内容写入

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    entry: {
        main: './src/index.js',
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

• 安装webpack-merge

npm install webpack-merge -D

• 修改webpack.dev.js,将 devConfig 和 commonConfig 合并到一起

const webpack = require('webpack')
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const devConfig = {
    mode: "development",
    devtool: "cheap-module-eval-source-map",
    devServer: {
        contentBase: './build',
        open: true,
        port: 1314,
        hot: true,
        // hotOnly: true // hmr失效时是否不刷新页面
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true
    }
}

module.exports = merge(commonConfig,devConfig)

• 修改webpack.prod.js,将 prodConfig 和 commonConfig 合并到一起

const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const prodConfig = {
    mode: "production",
    devtool: "cheap-module-source-map",

}

module.exports = merge(commonConfig,prodConfig)

为了方便管理，可以将webpack打包设置的文件统一放到单独的文件夹

• 修改package.json

"scripts": {
// 文件路径修改
    "start": "webpack-dev-server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
},

• 因为打包设置的路径都是根据当前的webpack的config文件而言的，因此路径发生变化后webpack.common.js也要做一些修改，CleanWebpackPlugin的路径及output的路径要修改