当我 web pack 的时候
--watch --config webpack.production.config.js --mode production
我有这个错误:
ERROR in TypeError: cb is not a function
index.js:160 compilation.plugin [formation-front]/[preload-webpack-plugin]/index.js:160:9
new Promise
Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise] [formation-front]/[tapable]/lib/Hook.js:35:21
index.js:673 [formation-front]/[html-webpack-plugin]/index.js:673:47
index.js:178 Promise.resolve.then.then.then.then.then.then.html [formation-front]/[html-webpack-plugin]/index.js:178:18
这是我的 webpack.production.config.js :
'use strict';
// process.traceDeprecation = true
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const path = require('path');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const entry = {
app: [
'babel-polyfill',
path.resolve(__dirname, './client/app/app.js')
]
};
const output = {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: ''
};
const uglifyOptions = {
cache: true,
parallel: true,
uglifyOptions: {
ie8: false,
ecma: 8,
compress: {
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true
},
output: {
comments: false,
beautify: false
},
mangle: {
reserved: ['$super', '$', 'exports', 'require', 'angular']
},
warnings: false
}
};
const modules = {
rules: [
{
test: /\.js$/,
exclude: [/node_modules/, /app\/assets/],
use: [
{
loader: 'ng-annotate-loader'
},
{
loader: 'babel-loader'
}
]
},
{
test: /\.html$/,
use: [{
loader: 'raw-loader'
}]
},
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
})
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
hash: 'sha512',
digest: 'hex',
name: '[hash].[ext]'
}
},
{
loader: 'image-webpack-loader',
options: {
query: {
mozjpeg: {
progressive: true
},
optipng: {
optimizationLevel: 7
},
gifsicle: {
interlaced: 'true'
},
pngquant: {
quality: '65-90',
speed: '4'
}
}
}
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader',
options: {
limit: '10000',
mimetype: 'application/font-woff'
}
}]
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader',
}]
},
]
};
const plugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
hash: true,
inject: true,
template: 'client/index.html',
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new PreloadWebpackPlugin({
rel: 'preload',
as: 'script',
include: 'all',
fileBlacklist: [/\.(css|map)$/, /client?.+/]
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer'
}),
new HtmlWebpackInlineSourcePlugin(),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
}),
new ExtractTextPlugin({
disable: true,
filename: "[name].[contenthash].css"
}),
];
try {
module.exports = {
mode: 'production',
devtool: '',
entry,
output,
module: modules, // Set to not conflict with module from module.exports,
plugins,
optimization: {
namedModules: true, // NamedModulesPlugin()
splitChunks: { // CommonsChunkPlugin()
name: 'vendor',
filename: 'vendor.[chunkhash].js',
minChunks: 2,
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
},
minimizer: [
new UglifyJsPlugin(uglifyOptions)
],
concatenateModules: true // ModuleConcatenationPlugin
}
};
} catch (err) {
console.log(err);
}
这是我的 package.json :
{
"name": "Argalis",
"version": "0.0.1",
"description": "-",
"main": "index.js",
"dependencies": {
"@uirouter/angularjs": "^1.0.18",
"angular": "^1.7.2",
"angular-clock": "^0.7.0",
"angular-file-saver": "^1.1.3",
"angular-perfect-scrollbar-2": "^1.2.5",
"angular-recaptcha": "^4.1.5",
"angular-upload": "^1.0.13",
"b64-to-blob": "^1.2.19",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.23.0",
"config": "^1.29.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"json-loader": "^0.5.4",
"leaflet": "^1.3.1",
"leaflet-routing-machine": "^3.2.8",
"less": "^3.0.4",
"lodash": "^4.17.10",
"materialize-css": "^0.100.2",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"node-sass": "^4.9.0",
"node-uuid": "^1.4.7",
"postcss-loader": "^2.1.5",
"required-loader": "^1.3.16",
"uid-safe": "^2.1.3",
"underscore": "^1.9.1",
"webpack-file-preprocessor-plugin": "0.0.1",
"yarn-upgrade-all": "^0.3.0"
},
"devDependencies": {
"angular-jwt": "^0.1.10",
"angular-materialize": "^0.2.1",
"angular-mocks": "^1.7.2",
"angular-remove-di-loaders": "^1.0.4",
"autoprefixer": "^8.6.3",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.5",
"babel-loader": "^7.1.4",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.7.4",
"babel-preset-env": "^1.7.0",
"babel-runtime": "^6.6.1",
"browser-sync": "^2.24.5",
"chai": "^4.1.2",
"compression-webpack-plugin": "^1.1.6",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.28.11",
"eslint": "^5.0.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-angular": "^0.5.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-angular": "^3.3.0",
"eslint-plugin-async": "^0.1.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.10.0",
"extract-text-webpack-plugin": "^4.0.0-alpha.0",
"file-loader": "^1.1.11",
"font-awesome-webpack": "0.0.5-beta.2",
"fs-walk": "0.0.2",
"gulp": "^4.0.0",
"gulp-rename": "^1.3.0",
"gulp-template": "^5.0.0",
"gulp-util": "^3.0.7",
"html-webpack-inline-source-plugin": "^0.0.10",
"html-webpack-plugin": "^3.2.0",
"htmlhint-loader": "^1.3.1",
"image-webpack-loader": "^4.3.1",
"imports-loader": "^0.8.0",
"karma": "^2.0.4",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.4",
"karma-webpack": "^3.0.0",
"mocha": "^5.2.0",
"ng-annotate-loader": "0.6.1",
"node-libs-browser": "^2.1.0",
"preload-webpack-plugin": "^2.3.0",
"preprocess": "^3.1.0",
"raw-loader": "^0.5.1",
"run-sequence": "^2.2.1",
"sass-lint": "^1.7.0",
"sass-loader": "^7.0.3",
"sasslint-webpack-plugin": "^1.0.3",
"script-ext-html-webpack-plugin": "^2.0.1",
"style-loader": "^0.21.0",
"supports-color": "^5.4.0",
"uid": "0.0.2",
"url-loader": "^1.0.1",
"webpack": "^4.12.1",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"yargs": "^11.0.0",
"zxcvbn": "^4.4.0"
},
"scripts": {
"test": "return 0",
"serve": "set NODE_ENV=development&&gulp serve",
"start": "webpack --watch --config webpack.dev.config.js --mode development",
"start-ifrac": "set NODE_ENV=dev_ifrac && npm start",
"build": "webpack --bail --config --mode production webpack.production.config.js",
"build-ifrac": "set NODE_ENV=prod_ifrac && webpack --bail --mode production --config webpack.prod_ifrac.config.js",
"build-socotec": "set NODE_ENV=prod_socotec && webpack --bail --mode production --config webpack.prod_socotec.config.js",
"buildtest": "webpack --config --bail --mode production webpack.test.config.js"
},
"keywords": [
"angular",
"webpack",
"es6"
],
"repository": {
"type": "git",
"url": "https://gitlab.com/Argalis/formation-front.git"
},
"author": "Argalis"
}
最佳答案
我认为还不支持 webpack v4。有一个 PR 添加 https://github.com/GoogleChromeLabs/preload-webpack-plugin/pull/72
关于webpack - Preload Webpack 插件和 Webpack 4 出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51063453/