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。 我想问题是条目 "style" 即使通过它也会产生输出 JS由 ExtractTextPlugin 处理，但是 如何告诉 webpack 不要为条目生成 javascript 输出？

我也尝试过不使用多个入口点，而是将 main.scss 添加到带有 index.js 的一个入口点列表中。它当然没有产生额外的文件，但转译后的 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。

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

Webpack 2: exclude css entry from result

webpack

sass-loader

webpack-2

extracttextwebpackplugin