webpack区分环境以及打包分析-一一网

这是我参与更文挑战的第7天，活动详情查看：更文挑战

development模式和production模式区分打包

development模式和production模式，它们分别用来做什么呢？

当我们开发一个项目的时候，我们一般用development这个环境进行项目的开发。在这个打包环境下，webpack中我们使用了devServe，可以帮我们起一个服务器。然后这个服务器里面还集成了一些比如HMR这样的特性，只要我更改了代码，他会帮我重新打包。我们代码的内容就会实时的展示在对应的网页上，所以，在开发环境下，我们使用development这种模式非常的方便。但是一旦我们的源代码开发完成，我们需要把代码打包上线，这个时候，就需要production这种模式。

1、首先在开发环境中source map它是非常全的，这样的话可以帮我们在开发环境下快速的定位代码的问题。但在 production 环境下，代码已经上上线了，那么source map其实可以不是那么重要了，所以这个时候在线上环境下，一般它的source map会更加的简洁一些。

2、在开发环境下，我们的代码一般打包生成之后，不需要做压缩，因为在开发环境下，我们希望代码不压缩。可以看到，打包生成代码的内容，比较明显的，看到里面的一些具体说明。但是一旦我们的代码要上线，那么我们希望我们的代码可以被压缩，所以 production 模式下代码一般都是被压缩过的。

配置

首先我们新建一个build目录并出创建三个文件，如下：

- build
    - webpack.common.js
    - webpack.dev.js
    - webpack.prod.js
复制代码

webpack.common.js存放 development以及production共用的配置;
webpack.dev.js存放 development 的单独配置;
webpack.prod.js存放 production 的单独配置;

三个文件配置如下：

// webpack.common.js
module.exports = {
    entry:{  }
    ...
    output: { }
}
复制代码

// webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const devConfig = {
    mode: 'development'，
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true
    },
    ...
}
module.exports = merge(commonConfig, devConfig);
复制代码

// webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const prodConfig = {
    mode: 'production'，
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    },
    ...
}
module.exports = merge(commonConfig, prodConfig);
复制代码

webpack-merge的作用是将公共的配置以及不同模式下的配置进行合并；

接着在修改package.json的运行命令，配置如下：

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  } 
复制代码

执行dev就是运行webpack.dev.js,执行build就是运行 webpack.prod.js;

打包分析

webapck提供了一个分析工具的git仓库分析仓库，根据里面的说明我们需要在package.json坐下配置：

"scripts": {
    "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
 }
复制代码

--profile --json > stats.json意思是生成一个json文件，接着我们在打开分析这个json文件的网站json分析网站，这个网站需要科学上网才能打开，把json文件丢进去后就会小时如下的页面：

进入chunks显示如下：

打包后我们的dist目录确实生成了图上三个文件，assets是静态资源，Warnings当我们打包时触发的警告都会在这里显示,Errors当我们打包时触发的警告都会在这里显示；