Question

使用以下webpack配置我试图在入口点entry.js中缩小css。entry.js只需要（'mystyles.css'）

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

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

mystyles.css有以下css

.body { background: #000;  }

运行webpack时出现以下错误

Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.

请让我知道我必须使用哪个加载程序将所有.css文件转换为单个styles.css文件

Answer 1

你尝试过这个吗？这将安装您在配置中引用的style和css个加载器

npm i --D css-loader style-loader

Answer 2

这可能不是唯一的问题，但对于初学者来说，你的webpack配置对象中没有定义output ......

您需要以下内容：

  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },

输出选项告诉Webpack如何将编译后的文件写入磁盘。请注意，虽然可以有多个入口点，但只指定了一个输出配置。

请参阅此处的官方文档： https://github.com/webpack/docs/wiki/configuration

通过webpack在一个文件中缩小CSS

2 个答案: