typescript - Webpack "kan inte hitta modul" source-map, modulbygget misslyckades


Jag försöker paketera projektet med Webpack, men jag får ett fel: "Kan inte hitta modul './stylesheet/css/build.css'". Jag använder webpack 1.14.0 och yarn 0.17.10. webpack skärmdump

Vänligen ge mig några råd om hur jag ska använda require() för att få resultat.

Tack på förhand för din hjälp!

webpack.dev.js

  var config = {
      cache: true,
      devtool: 'source-map',
      entry: {
        polyfills: './src/polyfills',
        vendor:    './src/vendor',
        main:      './src/main'
      },

      output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
      },

      module: {
        loaders: [
          { test: /\.ts$/,   loader: 'awesome-typescript-loader' },
          { test: /\.json$/, loader: 'json-loader' },
          { test: /\.html/,  loader: 'raw-loader' },
          { test: /\.css$/,  loader: 'to-string-loader!css-loader' },
          { test: /\.css$/,  loader: ExtractTextPlugin.extract('css?minimize')}
        ]
      },
      plugins: [
          new webpack.optimize.CommonsChunkPlugin({ name: ['polyfills', 'vendor', 'main'].reverse(), minChunks: Infinity }),
          new ExtractTextPlugin('/src/stylesheet/css/zio.css')
      ],

      resolve: {
        extensions: ['', '.ts', '.js', '.json'],
        modulesDirectories: ['node_modules', 'src']
      }
    };

main.ts

require("./stylesheet/css/build.css");

@NgModule({
  declarations: [
    App,
    Main,
    Auth,
    AppHeader
  ],
  providers,
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    routes
  ],
  bootstrap: [App]
})
export class AppModule {}

Ytterligare information - projektets struktur

Svar #1

Du bör konfigurera ExtractTextPlugin på följande sätt:

// webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

Då kan du kräva CSS-bladen som du redan har gjort:

require("./stylesheet/css/build.css");
require("./src/stylesheet/css/zio.css");
// and so on ...