CODEWITHSUNDEEP
webpackwebpack-2
Brk
Brk

Reputation: 1297

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

I have the following configuration which comes from a seed project which I have download from 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-.+))/]
          }
    ]}

I am trying to convert the code of webpack 1 to webpack 2, so the first thing I did is to replace loader or loaders with the word 'use'.

It works in most of the cases, excpet the case where I have the following loader:

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

I have tried to tranlsate it to the following code:

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

But I got errors when I tried to build the project with webpack. What is the reason for this errors, am I doing something wrong(probably) :(

Upvotes: 0

Views: 53

Answers (1)

thesublimeobject
thesublimeobject

Reputation: 1403

Have you tried this?

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

Upvotes: 1

Related Questions