WebPack - ExtractTextPlugin.extract - 模块构建失败:未指定输入:提供要处理的文件名或源字符串

时间:2017-02-10 03:50:14

标签: webpack-2

我刚刚升级到最新的WebPack并且我的现有配置引发了错误,我已经找到了导致问题的代码,但不知道如何解决它。

我已将错误追踪到此处

  {
    test: /\.(css|scss)$/,
    loaders: ExtractTextPlugin.extract({
      fallbackLoader: 'style',
      loader: 'css?minimize!sass!postcss'
    })
  },

来自Package.json的条目

"webpack": "2.2.1",
"extract-text-webpack-plugin": "^2.0.0-beta.3",
"html-webpack-plugin": "^2.24.1",

错误

ERROR in ./~/css-loader?minimize!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: No input specified: provide a file name or a source string to process
 @ ./src/index.scss 4:14-172
 @ ./src/main.ts

ERROR in ./src/index.scss
Module build failed: ModuleBuildError: Module build failed: No input specified: provide a file name or a source string to process
    at d:\workible\data-extractor\app-client\node_modules\webpack\lib\NormalModule.js:137:35
    at d:\workible\data-extractor\app-client\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at d:\workible\data-extractor\app-client\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (d:\workible\data-extractor\app-client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js:51:13)
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:2234:31
    at apply (d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:20:25)
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:56:12
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:840:16
    at module.exports.render (d:\workible\data-extractor\app-client\node_modules\node-sass\lib\index.js:375:5)
    at d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:3894:5
    at process (d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:2299:17)
    at Immediate.<anonymous> (d:\workible\data-extractor\app-client\node_modules\sass-loader\node_modules\async\dist\async.js:2112:16)
    at runCallback (timers.js:649:20)
    at tryOnImmediate (timers.js:622:5)
    at processImmediate [as _immediateCallback] (timers.js:594:5)

ERROR in d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js!d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss doesn't export content

WebPack配置

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallbackLoader: 'style',
          loader: 'css?minimize!sass!postcss'
        })
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loaders: [
          'ts'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      conf.paths.src
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    }),
    new ExtractTextPlugin('query-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})
  ],
  postcss: () => [autoprefixer],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  resolve: {
    extensions: [
      '',
      '.webpack.js',
      '.web.js',
      '.js',
      '.ts'
    ]
  },
  entry: `./${conf.path.src('main')}`,
  ts: {
    configFileName: 'tsconfig.json'
  },
  tslint: {
    configuration: require('../tslint.json')
  }
};

根据@ickiir

在我的.scss文件中添加了一些CSS
body {}

现在错误已提前到

ERROR in ./src/index.scss
Module build failed: ReferenceError: window is not defined
    at d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:99:30
    at d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:94:47
    at module.exports (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:116:68)
    at Object.<anonymous> (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:400:36)
    at __webpack_require__ (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:21:30)
    at d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:65:18
    at Object.<anonymous> (d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss:68:10)
    at Module._compile (module.js:570:32)
    at Object.exec (d:\workible\data-extractor\app-client\node_modules\webpack\lib\NormalModule.js:94:6)
    at Object.<anonymous> (d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js:112:21)
    at Compiler.<anonymous> (d:\workible\data-extractor\app-client\node_modules\webpack\lib\Compiler.js:251:10)
    at d:\workible\data-extractor\app-client\node_modules\webpack\lib\Compiler.js:442:12
    at next (d:\workible\data-extractor\app-client\node_modules\tapable\lib\Tapable.js:138:11)
    at Compiler.<anonymous> (d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js:93:4)
    at next (d:\workible\data-extractor\app-client\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.<anonymous> (d:\workible\data-extractor\app-client\node_modules\ts-loader\dist\after-compile.js:11:13)

ERROR in d:\workible\data-extractor\app-client\node_modules\extract-text-webpack-plugin\loader.js!d:\workible\data-extractor\app-client\node_modules\style-loader\index.js!d:\workible\data-extractor\app-client\node_modules\css-loader\index.js?minimize!d:\workible\data-extractor\app-client\node_modules\sass-loader\lib\loader.js!d:\workible\data-extractor\app-client\node_modules\postcss-loader\index.js!d:\workible\data-extractor\app-client\src\index.scss doesn't export content

3 个答案:

答案 0 :(得分:6)

我最后通过执行以下操作解决了这个问题。

我通过添加以下内容确保我的index.scss文件不为空(根据@ickyrr)

body {}

我删除了fallbackLoader

  {
    test: /\.(css|scss)$/,
    loaders: ExtractTextPlugin.extract({
      //fallbackLoader: 'style',
      loader: 'css?minimize!sass!postcss'
    })
  },

答案 1 :(得分:1)

从webpack 2.2.1开始,语法发生了变化......因此,使用&#39;

这是一个例子:

之前:

    {
        test: /\.(scss|sass)$/,
        include: helpers.root('src/app'),
        exclude: [/\.global\.(scss|sass)$/, 'src'],
        loaders: ['raw-loader?sourceMap', 'sass-loader?sourceMap']
    },

在:

    {
        test: /\.(scss|sass)$/,
        include: helpers.root('src/app'),
        exclude: [/\.global\.(scss|sass)$/, 'src'],
        use: ['raw-loader?sourceMap', 'sass-loader?sourceMap']
    },

答案 2 :(得分:1)

Webpack 2太复杂了。在搞乱了一个小时之后,下面的内容对我来说是scss。

{ 
    test:/\.scss$/,
    use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]}),
    include:path.join(__dirname,"client/src"),
},

在我尝试上述操作之前,我查看了许多代码示例。希望这会有所帮助。