Webpack“找不到模块”source-map，模块构建失败。

Question

我正在尝试使用Webpack打包项目，但是收到一个错误提示：“找不到模块'./stylesheet/css/build.css'”。我正在使用Webpack 1.14.0和yarn 0.17.10。 webpack截图 请给我一些建议，如何使用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 {}

附加信息 - 项目结构

- Andrii Sikora

Answer 1

您应该将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 ...

- dotcs

---

感谢您的回答@dotcs，但我刚刚收到另一个错误：ERROR in ./src/main.ts Module not found: Error: Cannot resolve 'file' or 'directory' ./src/stylesheet/css/build.css in /home/andrii/WebstormProjects/pallybet_frontend_bvb/src @ ./src/main.ts 20:0-41我在typescript文件main.ts（入口点）中编写了require（“./stylesheet/css/build.css”），也许我需要在其他地方编写它？谢谢！ - Andrii Sikora

这意味着webpack无法解析您提供的文件路径。您能否在问题中添加有关文件结构的信息？该路径应相对于main.ts文件。因此，如果main.ts位于src文件夹中，而样式表位于src/stylesheet/css/build.css中，则路径应为require('./stylesheet/css/build.css')。 - dotcs

我已经添加了项目的结构。我理解了你的回答，也能够理解它应该如何工作，但是在我使用require('./stylesheet/css/build.css')之后，我仍然遇到了一个错误： "ERROR in ./~/css-loader!./src/stylesheet/css/build.css Module build failed: Unknown word (5:1)"如果你有更多的建议，我很乐意听取并解决这个问题。 谢谢 - Andrii Sikora

你不应该在 webpack.dev.js 文件中引用 css 文件，而是应该在例如 main.ts 中引用。原因是 webpack.dev.js 描述了 webpack 的流水线，而 main.ts 则被包含并转换为流水线。如果你已经这样做了，那么看到 build.css 就好了，因为从错误信息“未知单词”来看，文件中可能有一些不应该存在的东西。 - dotcs