webpack4.+ 学习二（生产环境配置）

前言

把 webpack4.+ 学习一（基本配置） 代码搞过来，建议重新安装一些依赖，防止报错。

原因

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。要遵循逻辑分离，因此通常建议为每个环境编写彼此独立的 webpack 配置。

• 开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。
• 生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。

配置分离（开发/生产）环境文件

1. 首先就要从安装 webpack-merge 开始，并将之前已成型的代码进行分离：

```npm install --save-dev webpack-merge```

webpack-merge 的工具会引用 “common” 配置，因此我们不必再在环境特定(environment-specific)的配 置中编写重复代码

2. 新建对应的文件夹，去掉 webpack.config.js

webpack.common.js、webpack.dev.js、webpack.prod.js ；去掉 webpack.config.js

配置webpack.common.js代码如下
用到两个基本的插件和loader插件
npm i clean-webpack-plugin html-webpack-plugin -D
clean-webpack-plugin：打包时自动清除输出文件夹中未用到的文件;
html-webpack-plugin：打包时会自动生成index.html并替换已有的index.html，bundle.js也会自行添加到 html 中。

	// 这里是通用配置
	const path = require('path');
	const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	
	module.exports = {
    
    
	    entry:{
    
     //入口文件
	        app: './src/index.js'
	    },    
	     //有关模块配置
	     module:{
    
    
	        rules:[            
	            {
    
    
	                test:/\.css$/, //需要配置的模块后缀名
	                use:["style-loader","css-loader"] //对应处理的loader插件名称 处理顺序从右往左	           
	            }
	        ]
	    },
	    plugins: [
	        // 对于 CleanWebpackPlugin 的 v2 versions 以下版本，使用 new CleanWebpackPlugin(['dist/*'])
	        new CleanWebpackPlugin(),
	        new HtmlWebpackPlugin({
    
    
	            title: 'Production',
	        }),
	    ],
	    output:{
    
     //出口文件
	        filename:'[name].bundle.js',
	        path: path.resolve(__dirname, 'dist')
	    }
	};

配置webpack.dev.js代码如下
安装开发服务器devServer,作用是修改代码后实时重新加载（刷新浏览器）
npm install webpack-dex-server -D

	// 开发环境
	const merge = require('webpack-merge');
	const common = require('./webpack.common');

	module.exports = merge(
	    common,{
    
    
	        mode:'development', //开发模式
	        devtool:'inline-source-map', 
	        devServer:{
    
    
	            contentBase: './dist',   //告诉服务器从哪提供内容，只有在想要提供静态文件时才需要
	            compress: true,          //一切服务都启用gzip 压缩
	            host: 'localhost',         //指定使用一个host，可用ip地址访问，没有的话如果别人访问会被禁止。默认localhost。
	            port: '9999',            //指定端口号，如省略，默认为”8080“
	            hot: true,               //启用模块热替换特性
	            inline: true,            //启用内联模式，一段处理实时重载的脚本被插入到bundle中，并且构建消息会出现在浏览器控制台
	            historyApiFallback: true,//开发单页应用时有用，依赖于HTML5 history API，设为true时所有跳转将指向index.html
	        }
	    }
	);

配置文件中有个mode项，webpack4中新加，作用如下:
–mode development 开发环境：
自行定义node环境变量为development
new webpack.DefinePlugin({“process.env.NODE_ENV”:JSON.stringify(“development”) })
使用 eval 构建 module, 提升增量构建速度
自动开启一些插件，如
NamedModulesPlugin 使用模块热替换(HMR)时会显示模块的相对路径

配置webpack.prod.js代码如下

	//生产环境
	const merge = require('webpack-merge');
	const common = require('./webpack.common.js');
	
	module.exports = merge(
	    common, {
    
    
	        mode: 'production', //生产模式
	    }
	);

配置文件中有个mode项，webpack4中新加，作用如下:
–mode production 生产环境：
不需要像旧版本一样定义node环境变量
new webpack.DefinePlugin({“process.env.NODE_ENV”:JSON.stringify(“production”) })
ps：许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。当使用 process.env.NODE_ENV === ‘production’ 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。
自动开启一些插件，如：
uglifyjs-webpack-plugin js代码压缩(所以无需再单独使用)
NoEmitOnErrorsPlugin 编译出错时跳过输出，以确保输出资源不包含错误
ModuleConcatenationPlugin webpack3 添加的作用域提升(Scope Hoisting)

3. 重新指向到新配置，更改package.json

	{
    
    
	  "name": "webpack-demo",
	  "version": "1.0.0",
	  "description": "",
	  "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": [],
	  "author": "",
	  "license": "ISC",
	  "devDependencies": {
    
    
	    "clean-webpack-plugin": "^3.0.0",
	    "css-loader": "^3.6.0",
	    "file-loader": "^6.0.0",
	    "html-webpack-plugin": "^4.3.0",
	    "mini-css-extract-plugin": "^0.9.0",
	    "style-loader": "^1.2.1",
	    "uglifyjs-webpack-plugin": "^2.2.0",
	    "webpack": "^4.43.0",
	    "webpack-cli": "^3.3.12",
	    "webpack-dev-server": "^3.11.0",
	    "webpack-merge": "^4.2.2"
	  },
	  "dependencies": {
    
    
	    "lodash": "^4.17.15"
	  }
	}

注解

"start": "webpack-dev-server --open --config webpack.dev.js",
webpack-dev-server    启动开发服务器   
--open    打开浏览器
--config webpack.dev.js    设置运行此脚本时执行的配置文件为webpack.dev.js

"build": "webpack --config webpack.prod.js"
webpack 启动 webpack
--config webpack.prod.js   设置运行此脚本时执行的配置文件为webpack.prod.js

执行 npm start
此时应该可以看到打开浏览器http://localhost:9999/，页面输出 hellowebpack

执行 npm run build
项目文件夹中自动生成打包后的文件目录（输出文件夹dist）