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

我还尽量不使用多个入口点，而是将 main.scss 添加到一个带有 index.js 的入口点列表中。当然，它没有产生额外的文件，但转译的脚本.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 文件中手动引用它。

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