html-webpack-plugin 的 npm 运行 构建错误
npm run build error for html-webpack-plugin
嘿，我是 webpack 的新手，我正在尝试将它用于使用 Cesium js 的项目 api。我正在按照他们的在线教程访问 T，但由于某种原因，当我 运行 命令 "npm run build" 时，我收到以下错误，但没有正确执行。
Peris-MacBook-Pro:App peri$ npm run build
> ngafid@1.0.0 build /Users/peri/Desktop/App
> webpack --config webpack.config.js
(node:23326) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:23326) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
/Users/peri/Desktop/App/node_modules/html-webpack-plugin/lib/compiler.js:81
var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
^
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
at /Users/peri/Desktop/App/node_modules/html-webpack-plugin/lib/compiler.js:81:51
at compile (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:222:11)
at hooks.afterCompile.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:470:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at compilation.seal.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:467:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:957:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeChunkAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:948:32)
at _err0 (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
at /Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11
at _class.runTasks (/Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
at UglifyJsPlugin.optimizeFn (/Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/index.js:182:16)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.additionalAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:943:36)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeTree.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:939:32)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at Compilation.seal (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:881:27)
at hooks.make.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:464:17)
at _err0 (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
at _addModuleChain (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:749:12)
at processModuleDependencies.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:688:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ngafid@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ngafid@1.0.0 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/peri/.npm/_logs/2018-02-27T04_17_33_336Z-debug.log
我的 wepack.config.js 文件中有这个：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: [ 'url-loader' ]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
并且我在 package.json
中添加了以下脚本行
"scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js"
}
我不确定我做错了什么。我试图查看警告是否是问题所在，但似乎不是。我假设它是导致错误的函数，但我该如何修复它？非常感谢！
第一个：
npm install -g yarn
然后：
yarn add webpack-contrib/html-webpack-plugin -D
Webpack 4 有一些弃用更改，html-webpack-plugin 的作者没有更改新要求的代码，这就是为什么这个插件不适用于新的 webpack 4 版本。
核心 webpack 团队分叉了这个插件，直到作者更改了这个包可用的初始代码和他们的分叉 contrib/html-webpack-plugin
所以你应该安装这个分支而不是原来的。
你只需从 npm 或 yarn 安装即可
例如
npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin
或用纱线
yarn add -D html-webpack-plugin@webpack-contrib/html-webpack-plugin
没有要求完全使用 yarn =) 你也可以通过 npm 来完成
更详细的信息：Webpack 4 release announce
我通过安装测试版 HTML Webpack Plugin 解决了这个问题。
npm i --save-dev html-webpack-plugin@next
对于那些正在寻找此问题的更新解决方案的人，模块 webpack-contrib/html-webpack-plugin 已不存在。有关详细信息，您可以在此处查看 discussion。解决方案 npm install html-webpack-plugin --save-dev 有效。如果这引发了 OP 问题中描述的 运行 时间错误，您可以尝试安装特定版本的模块 npm i html-webpack-plugin@4.4.0。希望这对你有用，就像对我一样。
嘿，我是 webpack 的新手，我正在尝试将它用于使用 Cesium js 的项目 api。我正在按照他们的在线教程访问 T，但由于某种原因，当我 运行 命令 "npm run build" 时，我收到以下错误，但没有正确执行。
Peris-MacBook-Pro:App peri$ npm run build
> ngafid@1.0.0 build /Users/peri/Desktop/App
> webpack --config webpack.config.js
(node:23326) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:23326) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
/Users/peri/Desktop/App/node_modules/html-webpack-plugin/lib/compiler.js:81
var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
^
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
at /Users/peri/Desktop/App/node_modules/html-webpack-plugin/lib/compiler.js:81:51
at compile (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:222:11)
at hooks.afterCompile.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:470:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at compilation.seal.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:467:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:957:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeChunkAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:948:32)
at _err0 (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
at /Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11
at _class.runTasks (/Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
at UglifyJsPlugin.optimizeFn (/Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/index.js:182:16)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.additionalAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:943:36)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeTree.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:939:32)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
at Compilation.seal (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:881:27)
at hooks.make.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:464:17)
at _err0 (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
at _addModuleChain (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:749:12)
at processModuleDependencies.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:688:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ngafid@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ngafid@1.0.0 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/peri/.npm/_logs/2018-02-27T04_17_33_336Z-debug.log
我的 wepack.config.js 文件中有这个：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: [ 'url-loader' ]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
并且我在 package.json
中添加了以下脚本行 "scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js"
}
我不确定我做错了什么。我试图查看警告是否是问题所在，但似乎不是。我假设它是导致错误的函数，但我该如何修复它？非常感谢！
第一个：
npm install -g yarn
然后：
yarn add webpack-contrib/html-webpack-plugin -D
Webpack 4 有一些弃用更改，html-webpack-plugin 的作者没有更改新要求的代码，这就是为什么这个插件不适用于新的 webpack 4 版本。
核心 webpack 团队分叉了这个插件，直到作者更改了这个包可用的初始代码和他们的分叉 contrib/html-webpack-plugin
所以你应该安装这个分支而不是原来的。
你只需从 npm 或 yarn 安装即可 例如
npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin
或用纱线
yarn add -D html-webpack-plugin@webpack-contrib/html-webpack-plugin
没有要求完全使用 yarn =) 你也可以通过 npm 来完成
更详细的信息：Webpack 4 release announce
我通过安装测试版 HTML Webpack Plugin 解决了这个问题。
npm i --save-dev html-webpack-plugin@next
对于那些正在寻找此问题的更新解决方案的人，模块 webpack-contrib/html-webpack-plugin 已不存在。有关详细信息，您可以在此处查看 discussion。解决方案 npm install html-webpack-plugin --save-dev 有效。如果这引发了 OP 问题中描述的 运行 时间错误，您可以尝试安装特定版本的模块 npm i html-webpack-plugin@4.4.0。希望这对你有用，就像对我一样。