我的 webpack 文件中有这种输入和输出:
entry: {
"logic": './foo/logic.js',
"logic.min": './foo/logic.js',
"style.min": './foo/style.scss'
},
watch: true,
devtool: 'source-map',
output: {
path: path.resolve(__dirname, '/dist'),
filename: '[name].js'
},
然后我运行一些规则以确保正确处理正确的文件:
module: {
rules: [
{
test: /\.jsx?$/i,
loader: 'babel-loader',
options: {
presets: ['es2015'],
minified: true
}
},
{
test: /\.scss|css$/,
use: extractSass.extract({
use: [{loader: "css-loader", options: { minimize: true }}, { loader: "sass-loader" }],
fallback: "style-loader"
})
},
],
},
据我了解 webpack 上面的代码应该输出:
logic.js
logic.min.js
style.min.css
和源 map 文件。
不幸的是，有一件事我无法弄清楚。我收到一个名为:
的文件style.min.css.js
为什么会生成这个文件？我尝试输出 [file].[ext] 但它实际上返回了 JS 文件扩展名 [ext]...
最佳答案
不幸的是，这就是 webpack 目前的工作方式。你可以看看这个问题https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/518 。您可以编写一个小插件来阻止插件发出 js 文件。这是一个有效的简单插件:
module.exports = class CleanupAssetsAndFiles {
constructor (options = {}) {
this.paths = options.paths || [ 'styles/' ];
this.extensions = options.extensions || [ 'js', 'js.map' ];
}
isInvalidExtension (asset) {
return (
this.extensions.reduce((validAssets, e) => {
if (asset.endsWith(e)) {
validAssets.push(e);
}
return validAssets;
}, []).length > 0
);
}
apply (compiler) {
compiler.plugin('should-emit', (compilation) => {
compilation.assets = Object.keys(compilation.assets).reduce((assets, a) => {
if (!this.isInvalidExtension(a) || !this.paths.some((path) => a.startsWith(path))) {
assets[a] = compilation.assets[a];
}
return assets;
}, {});
return true;
});
}
};
我为 webpack 3 编写了这个插件，但我相信它在 webpack 4 中仍然有效。基本上，它会查看您传递给它的扩展名和路径，并停止为这些路径发出这些文件。该插件适用于我的用例，但如果不一样，您可以调整它以适合您的用例。有一个待定的 PR 来添加对 CSS 的全面支持 https://github.com/webpack/webpack/pull/6448 。希望这会有所帮助。
关于javascript - Webpack - 输出不同的文件扩展名？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50276229/