如何在 Webpack 4 中跳过 Javascript 输出?
How to skip Javascript output in Webpack 4?
我在一个项目中使用 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 当前的工作方式。然而,我们并不是唯一遇到这个问题的人!有 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']
}),
]
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'));
}),
],
我在package.json
:
中用rm删除不需要的输出
"scripts": {
"build": "npm run clean && webpack -p && rm ./dist/unneeded.js"
},
2021 年 3 月:
在 Webpack 5 中,on-build-webpack
plugin 对我不起作用。
我发现了这个:
我正在处理的项目使用 Webpack 5 作为 CSS 模式库的构建工具。因此,我们不需要 dist
.
中的 main.js
运行 npm i -D webpack-shell-plugin-next
然后在webpack.config.ts
(只显示相关部分):
import WebpackShellPluginNext from "webpack-shell-plugin-next";
module.exports = {
output: {
path: path.resolve(__dirname, "static/dist")
},
plugins: [
// Run commands before or after webpack 5 builds:
new WebpackShellPluginNext({
onBuildEnd: {
scripts: [
() => {
fs.unlinkSync(path.join(config.output.path, "main.js"));
}
]
}
})
]
};
export default config;
我在一个项目中使用 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 当前的工作方式。然而,我们并不是唯一遇到这个问题的人!有 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']
}),
]
webpack-extraneous-file-cleanup-plugin 对 webpack 4.12.0 没有影响。
我建议使用 on-build-webpack 插件:
手动删除 bundle.jsvar WebpackOnBuildPlugin = require('on-build-webpack');
// ...
plugins: [
// ...
new WebpackOnBuildPlugin(function () {
fs.unlinkSync(path.join('path/to/build', 'bundle.js'));
}),
],
我在package.json
:
"scripts": {
"build": "npm run clean && webpack -p && rm ./dist/unneeded.js"
},
2021 年 3 月:
在 Webpack 5 中,on-build-webpack
plugin 对我不起作用。
我发现了这个:
我正在处理的项目使用 Webpack 5 作为 CSS 模式库的构建工具。因此,我们不需要 dist
.
main.js
运行 npm i -D webpack-shell-plugin-next
然后在webpack.config.ts
(只显示相关部分):
import WebpackShellPluginNext from "webpack-shell-plugin-next";
module.exports = {
output: {
path: path.resolve(__dirname, "static/dist")
},
plugins: [
// Run commands before or after webpack 5 builds:
new WebpackShellPluginNext({
onBuildEnd: {
scripts: [
() => {
fs.unlinkSync(path.join(config.output.path, "main.js"));
}
]
}
})
]
};
export default config;