Webpack 2：从结果中排除 css 条目

Question

我想用 webpack 编译 scss 和 js。但是，只要我将它与 Symfony 3 一起使用，其中只有前端的某些页面使用 javascript 组件，我想将 css 编译为独立文件并使用老式的 <link href="style.css"> 而不是将 (s)css 导入 javascript 模块.

我设法用下面的webpack.config.js 做到了，我应该产生js/script.js 和css/style.css。 它可以工作，但它也会产生我不需要也不想要的js/style.js。 我想问题是条目“样式”也会产生输出 JS，即使它是由 ExtractTextPlugin 处理的，但是 如何告诉 webpack 不要为条目生成 javascript 输出？

我还尝试不使用多个入口点，并使用 index.js 将 main.scss 添加到一个入口点列表中。它当然没有产生额外的文件，但是转译的 script.js 包含对 main.scss 的引用，这是我不想要的。我想要一个完全独立于脚本管理样式的纯粹解决方案。

const path = require('path');
const outputPath = path.join(__dirname, '..', 'www');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    devtool: 'source-map',
    entry: {
        script: ['./src/js/index.js'],
        style: ['./src/scss/main.scss']
    },
    target: 'web',
    output: {
        filename: 'js/[name].js',
        path: outputPath
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({ // define where to save the file
            filename: 'css/[name].css',
            allChunks: true,
        })
    ]
};

Answer 1

Webpack 似乎总是需要一个源代码文件来引入外部样式，无论是 CSS 还是 Sass——我认为无论如何也没有办法解决这个问题。如果您只想将那些已编译的 css 样式文件导入到您的应用程序中并且不想拥有关联的 .js 文件，那么只需使用 node-sass 编译器并构建一个 .css 文件。然后使用 webpack css 加载器通过 webpack 将其引入您的应用程序，或者您可以在 html 文件中手动引用它。

否则只有一个 js 文件，其中包含一个 Sass 样式的导入，然后在构建后将其删除。无论哪种方式，您都会得到相同的 css。