为Ionic3+ (Angular4+)的项目配置nameof语法糖-进阶

1.项目根目录下建立个config文件夹。

2.config文件夹下建立个webpack.config.js配置脚本，内容如下：

var path = require("path");
var webpack = require("webpack");
var merge = require("webpack-merge");
var webpackConfig = require("@ionic/app-scripts/config/webpack.config");

const devConfig = {
  module: {
    loaders: [
      {
        test: /\.ts$/i,
        exclude: /node_modules/,
        loader: "ts-nameof-loader"
      }
    ]
  }
};

const prodConfig = {
  module: {
    loaders: [
      {
        test: /\.ts$/i,
        exclude: /node_modules/,
        loader: "ts-nameof-loader"
      }
    ]
  }
};

const customConfig = {
  dev: devConfig,
  prod: prodConfig
};


// Sometimes you may need to support multiple targets, webpack - merge
// will accept an object where each key represents the target configuration.
// The output becomes an array of configurations where matching keys are merged
// and non- matching keys are added.
let webpackMergedConfig = merge.multiple(customConfig, webpackConfig);

module.exports = {
  dev: webpackMergedConfig[0],
  prod: webpackMergedConfig[1]
};

3.为Ionic项目安装webpack-merge、ts-nameof、ts-nameof-loader包：

npm install webpack-merge ts-nameof ts-nameof-loader --save-dev

4.在package.json中设置自定义的webpack配置文件：

{
  //...
  "config": {
    "ionic_webpack": "config/webpack.config.js"
  },
  //...
}

注意：

let webpackMergedConfig = merge.multiple(customConfig, webpackConfig);

这里customConfig必须在webpackConfig的前面。

目前的缺陷：

使用nameof之后，调试时ts的source-map会变成js，可读性变差。

如果在webpack.config.js里配置上enforce: “pre”。

可以让source-map正常，但是编译出的js却带有nameof，会导致无法运行或者报错。