我在一个项目中使用Webpack 4,到目前为止我只需要编译和捆绑样式。没有Javascript。
这是我的配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
'css/bundle': path.resolve(__dirname, 'static/scss/index.scss'),
},
output: {
path: path.resolve(__dirname, 'static'),
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
include: path.resolve(__dirname, 'static/scss'),
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
],
};
问题是它输出两个文件:bundle.css和bundle.js。有没有办法配置Webpack,以便它不输出Javascript包?我试图浏览文档,尝试了十几种不同的东西,但它并没有真正起作用。
这里一个重要的注意事项是,如果我删除了css-loader,捆绑失败。因此,虽然css-loader很可能负责输出bundle.js文件,但我并不完全确定如何避免使用它。
webpack-extraneous-file-cleanup-plugin对webpack 4.12.0无效。
我可以建议使用on-build-webpack插件手动删除bundle.js:
var WebpackOnBuildPlugin = require('on-build-webpack');
// ...
plugins: [
// ...
new WebpackOnBuildPlugin(function () {
fs.unlinkSync(path.join('path/to/build', 'bundle.js'));
}),
],
不幸的是,这只是webpack目前的工作方式。但是,我们并不孤单在这个问题上!有a plugin来清理任何不需要的文件:
安装插件:
yarn add webpack-extraneous-file-cleanup-plugin -D
然后在你的配置中:
const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');
plugins: [
new ExtraneousFileCleanupPlugin({
extensions: ['.js'],
minBytes: 1024,
paths: ['./static']
}),
]
我只是在package.json
中使用新任务“cleanjs”删除输出:
"scripts": {
"clean": "rimraf dist",
"cleanjs": "rimraf dist/assets/js",
"dev": "webpack-dev-server --progress --hide-modules --mode development",
"build": "npm run clean && webpack --hide-modules --mode production && npm run cleanjs"
},
然后在构建过程结束时调用此任务(请参阅构建任务)。