development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

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

npm scripts

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
//让 npm start script 中 webpack-dev-server 使用 development(开发环境) 配置文件
    "start": "webpack-dev-server --open --config webpack.dev.js",
//npm run build script 使用 production(生产环境) 配置文件
    "build": "webpack --config webpack.prod.js"
  }
}

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
　　// 默认运行webpack.config.js
    "start": "webpack-dev-server --open",
    "build": "webpack"
}

//webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    //清理dist文件夹，保证里面只有最新生成的文件
    new CleanWebpackPlugin(['dist']),
    //生成它自己的 index.html 文件，它会用新生成的 index.html 文件，替换我们的原有文件
    new HtmlWebpackPlugin({
      title: 'Production'
    })
  ]
}

//webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
//webpack-merge 工具提供了各种 merge(合并) 高级功能
module.exports = merge(common, {
  mode: 'development',
  //能够将错误定位到源码，而不是压缩后到代码
  //用于develipment环境
  //强大的 source map
  devtool: 'inline-source-map',
  //提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能
  //改任何源文件并保存它们，web server 将在编译代码后自动重新加载
  //浏览器自动刷新
  devServer: {
    contentBase: './dist'
  }
});

//webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
module.exports = merge(common, {
//webpack v4+ 会默认压缩你的代码
  mode: 'production',

//在生产环境中启用 source map，因为它们对 debug(调试源码) 和运行 benchmark tests(基准测试) 很有帮助

//避免在生产中使用 inline-*** 和 eval-***，因为它们会增加 bundle 体积大小，并降低整体性能。

//与开发环境用的不一样

　devtool: 'source-map'

});

指定mode

许多 library 通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的 log(日志记录) 和 test(测试) 功能。并且，在使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境，删除或添加一些重要代码，以进行代码执行方面的优化。从 webpack v4 开始, 指定 mode 会自动地配置 DefinePlugin：

技术上讲，NODE_ENV 是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境(dev-vs-prod)下，server tools(服务期工具)、build scripts(构建脚本) 和 client-side libraries(客户端库) 的行为。然而，与预期相反，无法在构建脚本 webpack.config.js 中，将 process.env.NODE_ENV 设置为 "production"，请查看 #2537。因此，在 webpack 配置文件中，process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' 这样的条件语句，无法按照预期运行

任何位于 /src 的本地代码都可以关联到 process.env.NODE_ENV 环境变量

 import { cube } from './math.js';
 if (process.env.NODE_ENV !== 'production') {
   console.log('Looks like we are in development mode!');
 }

  function component() {
    var element = document.createElement('pre');

    element.innerHTML = [
      'Hello webpack!',
      '5 cubed is equal to ' + cube(5)
    ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());

webpack(7)-生产环境

npm scripts

指定mode

猜你喜欢