webpack开发环境与生产环境分离

柔情只为你懂 2022-06-05 08:23 237阅读 0赞

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

虽然，以上我们将生产环境和开发环境做了略微区分，但是，请注意，我们还是会遵循不重复原则(Don’t repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。

> 注：示例的完整代码请参考《[Webpack整合实例及优化][Webpack]》

### 安装 ###

推荐使用项目局部安装：在 package.json 中添加如下配置，并进行安装

> “webpack-merge”: “^4.1.1”,

### 配置文件分离 ###

![这里写图片描述][SouthEast]

webpack.common.js

const path = require("path");
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const CleanWebpackPlugin = require("clean-webpack-plugin");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = {
        entry: {
            app: "./js/requireAddDiv.js"
        },
        module: {
            rules: [
                {
                    test: /\.(jsx|js)$/,
                    use: {
                        loader: "babel-loader?cacheDirectory=true", // 使用cache提升编译速度
                        options: {
                            presets: ["env", "react"],
                            plugins: ["transform-runtime"]// 避免重复引入
                        }
                    },
                    exclude: /node_modules/
                },
                {
       // 分离 css
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },
                {
                    test: /\.html$/,
                    use: "html-loader"
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(["dist"]),
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "index.temp.html")
            })
        ]
    };

webpack.dev.js

const merge = require("webpack-merge");
    const common = require("./webpack.common");
    const path = require("path");
    const webpack = require("webpack");
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = merge(common, {
        devtool: "eval-source-map", // 仅在开发过程中使用
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "bundle.[hash].js"
        },
        devServer: {
            contentBase: "./",
            historyApiFallback: true,
            inline: true
            // hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
        },
        module: {
            rules: [
                {
       // 处理图片，会在 output 目录中生成图片文件，js 中需要使用 require("*.jpg")先行引入才可以，同样 html 中通过 background-image 设置的图片不可以，但 css 中通过 background-image 设置的图片可以
                    test: /\.(jpg|png)$/,
                    use: {
                        loader: "file-loader",
                        options: {
                            outputPath: "images/", // 这里的 images 貌似没什么作用，但不写不行，可以是任意的一个或多个字符
                            name: "[name].[hash:8].[ext]", // 8表示截取 hash 的长度
                            useRelativePath: true// 这个必须与 outputPath 结合使用才可以处理 css 中的引入的图片
                        }
                    }
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin("css/styles-[hash].css") // 可以单独设置css的路径
            // new webpack.NamedModulesPlugin(), // 以便更容易查看要修补(patch)的依赖
            // new webpack.HotModuleReplacementPlugin() // 使用 hot 导致页面不能自动刷新？
        ]
    });

webpack.prod.js

const merge = require("webpack-merge");
    const common = require("./webpack.common");
    const path = require("path");
    const webpack = require("webpack");
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = merge(common, {
        devtool: "source-map",//生产环境也可以设置，有点儿影响性能，但方便调试
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "bundle.js"
        },
        module: {
            rules: [
                {
       // 处理图片，会在 output 目录中生成图片文件，js 中需要使用 require("*.jpg")先行引入才可以，同样 html 中通过 background-image 设置的图片不可以，但 css 中通过 background-image 设置的图片可以
                    test: /\.(jpg|png)$/,
                    use: {
                        loader: "file-loader",
                        options: {
                            outputPath: "images/", // 这里的 images 貌似没什么作用，但不写不行，可以是任意的一个或多个字符
                            name: "[name].[ext]",
                            useRelativePath: true// 这个必须与 outputPath 结合使用才可以处理 css 中的引入的图片
                        }
                    }
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin("版权所有，盗版必究！"),
            new webpack.DefinePlugin({
                "process.env": {
                    "NODE_ENV": JSON.stringify("production")
                }
            }),
            // new webpack.optimize.OccurrenceOrderPlugin(), // 现在是默认启用,不再需要手动启动
            new webpack.optimize.UglifyJsPlugin({
                output: {
                    comments: false// remove all comments
                },
                compress: {
                    warnings: false
                },
                sourceMap: true // 如果你在压缩代码时启用了 source map，或者想要让 uglifyjs 的警告能够对应到正确的代码行，你需要将 UglifyJsPlugin 的 sourceMap 设为 true。
            }),
            new ExtractTextPlugin("css/styles.css") // 可以单独设置css的路径
        ]
    });

package.json

{
      "name": "webpack",
      "version": "1.0.0",
      "description": "This is just a test",
      "main": "dist/bundle.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack-dev-server --open --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js"
      },
      "keywords": [
        "webpack",
        "dev-server"
      ],
      "author": "slHuang",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.4",
        "webpack-merge": "^4.1.1",
        "style-loader": "^0.19.0",
        "css-loader": "^0.28.7",
        "postcss-loader": "^2.0.8",
        "autoprefixer": "^7.1.6",
        "babel-core": "^6.26.0",
        "babel-cli": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-react": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "babel-plugin-transform-runtime": "^6.23.0",
        "extract-text-webpack-plugin": "^3.0.2",
        "clean-webpack-plugin": "^0.1.17",
        "html-loader": "^0.5.1",
        "file-loader": "^1.1.5",
        "eslint": "^4.11.0"
      },
      "dependencies": {
        "babel-runtime": "^6.26.0"
      }
    }

运行 start 为开发环境，  
运行 build 为生产环境。

[Webpack]: http://blog.csdn.net/hsl0530hsl/article/details/78490034
[SouthEast]: /images/20220605/8f6be226c4d946088818375fb778893f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack生产环境的基本配置

文章目录一、提取css成单独文件 1、创建文件 2、下载 mini-css-extract-plug

骑猪看日落/ 2022年12月27日 01:13/ 0 赞/ 294 阅读

相关 vue 配置生产环境开发环境

prod API\_ROOT: ‘“生产环境”’ 'use strict' module.exports = { NODE_E

深藏阁楼爱情的钟/ 2022年11月24日 14:26/ 0 赞/ 201 阅读

相关 webpack生产环境配置

webpack生产环境配置 const { resolve } = require('path'); const MiniCssExtractPlugi

拼搏现实的明天。/ 2022年10月12日 12:17/ 0 赞/ 244 阅读

相关 webpack 生产/开发环境配置文件分离

npm install webpack-merge -D build目录下: base.config.js const path=require("path")

古城微笑少年丶/ 2022年09月16日 04:47/ 0 赞/ 221 阅读

相关 webpack生产环境基本配置

webpack.config.js: const { resolve }=require("path") //提取css代码为单独文件 const M

痛定思痛。/ 2022年09月12日 10:48/ 0 赞/ 225 阅读

相关 webpack入门3-----生产环境配置

下方的配置文件均为webpack.config.js文件在配置完成后运行指令均为webpack，可查看打包产生的文件项目内容上传到了码云 [https://gite

比眉伴天荒/ 2022年08月30日 01:48/ 0 赞/ 227 阅读

相关 webpack开发环境与生产环境分离

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模

柔情只为你懂/ 2022年06月05日 08:23/ 0 赞/ 238 阅读

相关 14、webpack生产环境构建

1）代码压缩虽然 [UglifyJSPlugin][] 是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件： [BabelMinif

今天药忘吃喽~/ 2022年01月27日 15:23/ 0 赞/ 281 阅读

相关 webpack如何区分production生产环境和development开发环境？

node有一个特殊内置环境变量：NODE\_ENV，可以从process.env.NODE\_ENV中读取到。当运行npm xx的时候，其实是执行了一个sh命令，去运行不同的

红太狼/ 2022年01月18日 22:09/ 0 赞/ 402 阅读

相关开发环境、测试环境、预生产环境、生产环境区别

一、开发和配置环境：所有的开发和配置在这个环境里进行。一般情况下，只有这个环境可以改配置和进行开发，并且一般不在这个环境下创建数据。（开发环境就是每个开发人员电脑上的开发环

浅浅的花香味﹌/ 2021年09月16日 15:08/ 0 赞/ 741 阅读