Webpack“找不到模块”源映射,模块构建失败

时间:2016-12-21 00:25:55

标签: typescript webpack css-loader extract-text-plugin

我正在尝试将项目与Webpack捆绑在一起,但我收到一个错误:“找不到模块'./stylesheet/css/build.css'” 我正在使用webpack 1.14.0和纱线0.17.10。 webpack printscreen

请告诉我如何使用require()来获得结果。

感谢您的帮助!

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 {}

其他信息 - structure of project

1 个答案:

答案 0 :(得分:0)

您应该配置ExtractTextPlugin

// 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")
    ]
}

然后您可以像以前一样要求CSS表格:

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