webpack学习（十四）：生产环境搭建

秒速五厘米 2022-04-05 05:22 270阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次配置完react的热替换: [https://blog.csdn.net/qq593249106/article/details/84947301][https_blog.csdn.net_qq593249106_article_details_84947301]

## 当前 webpack.config.js ##

目前使用的 webpack 配置文件包含了生产模式和开发模式,  
**webpack.config.js**

## 配置 ##

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

## 使用 webpack-merge ##

将生产模式和开发模式的公共部分写在 webpack.comon.js, 生产模式单独写在 webpack.prod.js, 开发模式单独写在 webpack.dev.js, 然后通过 webpack-merge 这个工具将它们连接起来

## 安装 ##

npm install webpack-merge --save-dev

## 分离代码 ##

**webpack.common.js**

**webpac.dev.js**

**webpack.prod.js**

## 修改NPM脚本配置 ##

**package.json**

{ 
      "name": "demo05",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --colors --config webpack.prod.js", //生产模式关联 webpack.prod.js 加上--progress显示构建百分比
        "dev": "webpack-dev-server --open --hot --progress --config webpack.dev.js" //开发模式关联 webpack.dev.js 加上--progress显示构建百分比
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "clean-webpack-plugin": "^1.0.0",
        "css-loader": "^2.0.0",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.5.0",
        "node-sass": "^4.11.0",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "react": "^16.6.3",
        "react-dom": "^16.6.3",
        "react-hot-loader": "^4.3.12",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10",
        "webpack-merge": "^4.1.5"
      },
      "dependencies": { 
        "lodash": "^4.17.11"
      }
    }

## 运行和打包 ##

终端分别输入 npm run build 和 npm run dev, 都能正常打包和运行

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84947301]: https://blog.csdn.net/qq593249106/article/details/84947301