5.webpack^4.42.1文档学习

前天犹大大直播对于vue3.0进行了一些讲解，看来vue3.0稳定版快要来，看来又要钢起来了。但是万丈高楼从高起，还是要先把基础打牢固。

1. 上一节我们学到了tree-shaking，是对源文件进行精简压缩处理。然而，实际开发中，我们有分生产环境和开发环境打包，那么我们总不能没换一种环境的打包就修改webpack配置文件吧？有没有一种方法，就是按需使用不同的配置文件呢？

webpack官方文档，给我介绍了一些有用的方法：
首先竟然都是打包构建，那么不同环境下肯定有公共的配置部分，比如公共的入口、出口、必要的插件集成。我这里安照按照官方的配置来：

1.首先咱们要借助一个第三方包的能力，先安装：

此包可以合并多个配置文件

npm install --save-dev webpack-merge

2.抽离出公共的配置代码：

// webpack.common.js

// node路径模块
const path = require('path');
// 清处dist目录下多余的bundle文件的插件
const { CleanWebpackPlugin }= require('clean-webpack-plugin');
// 控制输出html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
 // 入口配置
   entry: {
     app: './src/index.js'
   },
   plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       title: 'webpack-config-demo'
     })
   ],
   output: {
   // 输出bundle名
     filename: '[name].bundle.js',
   // 输出路径
     path: path.resolve(__dirname, 'dist')
   }
}

// webpack.dev.js

// 合并多个不同的配置文件模第三方模块
const merge = require('webpack-merge');
// 引入公共配置文件模块
const common = require('./webpack.common.js');
// 导出合并后的模块
module.exports = merge(common, {
  // 用以错误定位
   devtool: 'inline-source-map',
   // webpack-dev-sever本地服务静态资源解析目录
   devServer: {
     contentBase: './dist'
   }
 });

// webpack.prod.js

 const merge = require('webpack-merge');
 // 压缩代码，npm i uglifyjs-webpack-plugin@1安装最新的支持es6写法，一般通过babel转换，此处不做另外处理。
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 // 
 const common = require('./webpack.common.js');
 // 选项配置合并
 module.exports = merge(common, {
   plugins: [
     new UglifyJSPlugin({
     // 缓存
	 cache: true,
	 // 多进程，webpack默认是单进程压缩
     parallel: true,
})
   ]
 });

然后我们在package.json中设置脚本快捷命令:

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

然后命令行运行：
开发环境下的打包构建命令

npm run dev  

或者产品环境下的打包构建命令

npm run prod 

小结：1. 如果你有使用过 vue-cli 搭建过项目，vue.config.js会暴露出对webpack文件的配置合并选项，其内部也是通过webpack-merge实现的。
           2.实际上如果按照官方文档操作会出错，应为插件一直在更新，只要照着命令行抛出的错误操作就ok了。

2. 做完这些不同环境下的打包配置，那么我们能不能在代码中得到当前代码运行的环境，并且可以做出相应的代码调整？

webpack内置了定义编译时的全局变量，如果你看过某些框架源码，你应该对下面这段代码很眼熟：

if(process.env.NODE_ENV === 'development'){
	console.warn("warning")
}

其实它就是在webpack.config.js文件中进行了以下的配置：

{
...
 plugins: [
    new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('我是定义的全局变量--process.env.NODE_ENV')
})
]
}

src/index.js代码中添加

...
if(process.env.NODE_ENV=="我是定义的全局变量--process.env.NODE_ENV"){
    alert(process.env.NODE_ENV)
}

然后快捷脚本简单修改

...
 "devserve": "webpack-dev-server --open --config webpack.prod.js",
 ...

运行npm run devserve，页面中如图2-1：

图2-1

技术上讲，NODE_ENV 是一个由 Node.js 暴露给执行脚本的系统环境变量

此外，还有终端命令修饰–define process.env.NODE_ENV="‘name’"同样能达到以上效果，很多配置可以通过命令，但是不是很方便。
至此，我们以及学习了生产环境部署的相关基础知识。