1

I use Webpack for an Angular application. After migration to 4 version of the bundler file style.css (created by ExtractTextPlugin) is empty (i.e. has no any content excepting the only string /*# sourceMappingURL=styles.css.map*/)

// webpack.config.js
module.exports = {
  devtool: 'source-map',
  entry: {
    'polyfills': './src/js/polyfills.ts',
    'vendor': './src/js/vendor.ts', 
    'app': './src/js/main.ts'
  },

  output: {
    path: 'wwwroot/js',
    publicPath: '/app/',
    filename: 'js/[name].js',
    chunkFilename: 'js/[id].[hash].chunk.js'
  },

  resolve: {
    extensions: ['.ts', '.js'] 
  },

  module: { 
    rules: [
      {
        test: /\.ts$/, 
        loaders:
        [
          {
            loader: 'awesome-typescript-loader', 
            options: { configFileName: helpers.root('src', 'tsconfig.app.json') }
          },
          'angular2-template-loader'
        ]
      },

      {
        test: /\.(ts|js)$/,
        loader: 'angular-router-loader'
      },

      {
        test: /\.html$/,
        loader: 'html-loader'
      },

      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },

      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader?singleton=true', use: 'css-loader?minimize=true' })
      },

      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },

  plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./src'), 
      {} 
    ),

    new ExtractTextPlugin('css/styles.css'),

    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false
      }
    }),

    new HtmlWebpackPlugin({})
  ]
};

Also I changed the following things in the configuration file compared to the one for version 3:

  • remove CommonsChunkPlugin
  • remove UglifyJsPlugin
  • update ExtractTextPlugin to 4.0.0-beta.0

That's all. No issues with the version 3 here

Update: it seems there is the opened issue for ExtractTextPlugin v. 4.0.0-beta.0

Ilya Loskutov
  • 1,967
  • 2
  • 20
  • 34

0 Answers0