如何将以下 webpack 1 代码翻译成 webpack 2 代码

Question

我有以下配置，它来自我从 github 下载的种子项目。

var atlOptions = '';
  if (isTest && !isTestWatch) {
    // awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
    atlOptions = 'inlineSourceMap=true&sourceMap=false';
  }    
config.module = {
        rules: [
          // Support for .ts files.
          {
            test: /\.ts$/,
            // need to be replace with use
            loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'], 
            exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
          }
    ]}

我正在尝试将 webpack 1 的代码转换为 webpack 2，所以我做的第一件事就是将 loader 或 loaders 替换为单词 'use'。

它在大多数情况下都有效，除了我有以下加载器的情况：

loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader']

我尝试将其翻译成以下代码：

use:[{  loader:'awesome-typescript-loader?' + atlOptions  },{ loader:'angular2-template-loader' },{ loader:'@angularclass/hmr-loader' }]

但是当我尝试使用 webpack 构建项目时出现错误。这个错误的原因是什么，我做错了什么（可能）:(

Answer 1

你试过吗？

use: [
  {  
    loader: 'awesome-typescript-loader'
    options: {
      inlineSourceMap: true,
      sourceMap: false,
    }  
  },
  { 
    loader:'angular2-template-loader' 
  },
  { 
    loader:'@angularclass/hmr-loader' 
  }
]

如何将以下 webpack 1 代码翻译成 webpack 2 代码

How to translate the following webpack 1 code to webpack 2 code

webpack

webpack-2