首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >npm运行html-webpack插件的构建错误

npm运行html-webpack插件的构建错误
EN

Stack Overflow用户
提问于 2018-02-27 04:22:58
回答 4查看 13.5K关注 0票数 8

嘿,我是webpack的新手,我试着用它来做一个使用铯js的项目。我是按照他们的教程在线到T,但由于某种原因,当我运行命令"npm“,我得到以下错误,但它没有正确执行。

代码语言:javascript
运行
复制
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文件中有这样的内容:

代码语言:javascript
运行
复制
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中添加了下面的脚本行

代码语言:javascript
运行
复制
  "scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js"
  }

我不知道我做错了什么。我试着看看这些警告是否是问题所在,但似乎并非如此。我假设是这个函数导致了错误,但是如何修复它呢?非常感谢!

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-09-17 07:46:18

对于那些正在寻找这个问题的更新解决方案的人,模块webpack-contrib/html-webpack-plugin已经不存在了。有关更多细节,您可以在这里查看讨论。解决方案,npm install html-webpack-plugin --save-dev工作。如果这引发OP问题中描述的运行时错误,您可以尝试安装一个版本特定的模块npm i html-webpack-plugin@4.4.0。希望这对你有用,就像对我一样。

票数 5
EN

Stack Overflow用户

发布于 2018-02-28 14:38:09

Webpack 4有一些不推荐的修改,而html- webpack -plugin的作者并没有为新的需求更改代码,这就是为什么这个插件不适用于新的成都4版本的原因。

webpack的核心团队对这个插件进行了分叉,直到作者更改了这个包Cont肋骨/html-webpack-plugin提供的初始代码和他们的分叉。

所以你应该安装这个叉子而不是原来的叉子。

你只需从npm或纱线安装即可。

代码语言:javascript
运行
复制
npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin

或与纱线

代码语言:javascript
运行
复制
yarn add -D html-webpack-plugin@webpack-contrib/html-webpack-plugin

不需要精确地使用纱线=)你也可以通过npm

更详细的信息:Webpack 4发布公告

票数 8
EN

Stack Overflow用户

发布于 2019-02-13 09:18:34

我通过安装HTML Webpack插件的beta版本解决了这个问题。

代码语言:javascript
运行
复制
npm i --save-dev html-webpack-plugin@next
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49001115

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档