Question

我是webpack的新手，试图将webpack配置为使用这些加载器打包我的CSS文件：

'use strict';
require('./hosted/.tmp/styles/test.css');

module.exports = {
    devtool: 'eval-source-map',
    entry: {
        js:  './hosted/.tmp/scripts/script*.js'
    },
    output: {
        path: __dirname + './hosted',
        filename: 'dcae-bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: "style-loader!css-loader"}
        ]
    }
};

我只有一个文件test.css，其中包含以下内容：

body,html{height:100%}

运行webpack时，我收到错误：

C:\Development\Angular\Others\PounchOut\dcaeapp\hosted\.tmp\styles\test.css:1
(function (exports, require, module, __filename, __dirname) { body,html{height:100%}
                                                                  ^
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:404:25)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (C:\Development\Angular\Others\PounchOut\dcaeapp\webpack.config.js:3:1)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)

有什么问题？

提前致谢

Answer 1

我发现了问题，我不需要使用带有文件路径的require。这是最后的web.config：

'use strict';

module.exports = {
    devtool: 'eval-source-map',
    entry: {
        js:  ['./hosted/.tmp/scripts/scripts.js','./hosted/.tmp/styles/main.css']
    },
    output: {
        path: __dirname + '/hosted',
        filename: 'dcae-bundle.js'
    },
    module: {
        loaders: [
            {test: /\.(js|jsx)$/, loaders: ['babel-loader'], exclude: /node_modules/},
            {test: /\.css$/, loader: "style-loader!css-loader"},
        ]
    }
};

webpack css“SyntaxError：Unexpected token {”

1 个答案: