我刚刚开始学习 webpack 来管理项目中的依赖项。我正在尝试使用它为我的打字稿和 JavaScript 文件构建捆绑包。对于打字稿文件,我正在使用ts-loader
处理它的插件。对于CSS,我使用的是mini-css-extract
and an optimize-css-assets
插入。当我尝试运行 webpack 时,出现以下错误,并且我无法找出可能导致此错误的原因。
user@system spl % npm run build
> [email protected] /cdn-cgi/l/email-protection build /Users/user/Downloads/spl
> webpack --config webpack.config.js
/Users/user/Downloads/spl/node_modules/neo-async/async.js:16
throw new Error('Callback was already called.');
^
Error: Callback was already called.
at throwError (/Users/user/Downloads/spl/node_modules/neo-async/async.js:16:11)
at /Users/user/Downloads/spl/node_modules/neo-async/async.js:2818:7
at processTicksAndRejections (internal/process/task_queues.js:79:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] /cdn-cgi/l/email-protection build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] /cdn-cgi/l/email-protection build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2020-05-14T14_23_32_985Z-debug.log
以下是我用来构建 dist 文件的 webpack.config 文件。
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
mode: 'production',
entry: "./static/js/index.js",
output: {
filename: "bundle.[contentHash].js", // File name with hash, based on content
path: path.resolve(__dirname, 'dist')
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./static/index.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contentHash].css"
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.html$/,
use: [ "html-loader" ]
},
{
test: /\.[tj]s$/,
use: "ts-loader",
exclude: /(node_modules|tests)/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
],
},
resolve: {
alias: {
src: path.resolve(__dirname, 'src'),
static: path.resolve(__dirname, 'static'),
},
extensions: [ '.ts', '.js' ]
}
}