Vue + TypeScript + 环境配置 （1）

生产环境配置

参考自 生产环境部署
首先，将 webpack.config.dev.js 复制一份，命名为 webpack.config.dev.js

使用 DefinePlugin 来指定生产环境

Vue 等库在代码级别也依赖了一些生产环境的标志。 可以通过 DefinePlugin 来处理。DefinePlugin
Vue 主要是依赖了 Node 的 process.env.NODE_ENV ，所以我们可以在 plugins 块中加入配置：

    plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify("production")
          }),
    ]

值得注意的是，因为 DefinePlugin 实际上使用的是直接替换。我们你在是如下的过程：

// 替换前
if (process.env.NODE_ENV === "production") {
  console.log('Debug info')
}
// 替换后
if("production" === "production"){
}

所以需要NODE_ENV 本身包含一个字符串。所以也可以将上面的 JSON.stringify("production") 改为 '"production"'。

我们还可以指定其他的全局配置变量以供代码使用。

使用 UglifyJsPlugin 来压缩 JS 代码

官方文档： UglifyJsPlugin

1. 安装 UglifyJsPlugin , $npm i -D uglifyjs-webpack-plugin
2. 导入模块 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
3. 在 plugins 列表中注册：

plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify("production")
          }),
        new UglifyJsPlugin({}),
    ]

更多选项，将参考上面官方文档。

不要将 Vue 库打包

将所依赖的库打包进一个 bundle.js 不方便利用 对应库提供的 CDN 的便利。所以这里介绍如果不将 Vue 库打包进bundle.js 的方式。

1. 可以直接在 externals 配置块中添加声明，如下：

    externals:{
        vue: "Vue"
    },

2. 然后直接在 index.html 中添加对应资源的引用如下：

```html