webpack -- 完整入门学习笔记（七）

一、环境配置

webpack在运行时可以根据运行环境的不同，可以操作不同的文件等，一般来说环境又开发环境和生产环境，而有可能公司事多弄个测试环境
在node里面可以全局通过NODE_ENV来获取当前运行环境，从而进行不同的编译
获取环境的代码process.env.NODE_ENV
配置环境的方式有多种，这里个人知识有限，只列知道的三种方式

1、mode

通过mode来配置环境，不过这个又分为两种，一种是重新建文件配置，需要merge插件配合，一种就是在package.json的npm scripts里面配置，这个可以新建文件，也可以不建，通过判断环境配置不同的配置
新建文件
新建webpack.prod.config.js和webpack.dev.config.js，两个文件里面的初始配置差不多

const merge = require('webpack-merge')
const common = requrie('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
})

devServer是开发环境配置项，这个下一节将
devtool这是是编译工具，开发环境是inline-source-map，生产环境是source-map
devtool配置
package.json
这个就是在不同的命令中配置

"build": "webpack --mode=production --config webpack.config.js"
"dev": "webpack-dev-server --mode-development --config webpack.config.js"

通过这个方式可以在webpack.config.js里面通过process.env.NODE_ENV来判断当前环境

2、env-cross

这个是大佬那里学来的，需要安装cross-env模块
安装

npm install cross-env --save-dev

配置
这个依旧需要在package.json里面配置，跟上面是差不多的

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpck.config.js"

webpack -- 完整入门学习笔记（七）

原文：https://www.cnblogs.com/zjh-study/p/10863873.html