1.问题:
(node:13824) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
E:\Mall-fe\node_modules\webpack\lib\Chunk.js:846
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (E:\Mall-fe\node_modules\webpack\lib\Chunk.js:846:9)
at E:\Mall-fe\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
at Array.forEach (<anonymous>)
at E:\Mall-fe\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\Mall-fe\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (E:\Mall-fe\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.seal (E:\Mall-fe\node_modules\webpack\lib\Compilation.js:1231:27)
at hooks.make.callAsync.err (E:\Mall-fe\node_modules\webpack\lib\Compiler.js:546:17)
at _done (eval at create (E:\Mall-fe\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
at _err1 (eval at create (E:\Mall-fe\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:32:22)
at _addModuleChain (E:\Mall-fe\node_modules\webpack\lib\Compilation.js:1082:12)
at processModuleDependencies.err (E:\Mall-fe\node_modules\webpack\lib\Compilation.js:998:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
查找原因:
webpack4不再支持extract-text-webpack-plugin这个插件,需要使用最新版或者替代插件。
解决:
卸载之前版本插件,并安装最新测试版
npm install extract-text-webpack-plugin@next --save-dev
再次打包,完成。
2.应用模板Hogan时找不到
解决:新版本引入方式发生变化
var Hagon = require('hagon.js');
3.无法加载loader问题
ERROR in ./src/page/index/index.css
Module build failed: ModuleParseError: Module parse failed: Unexpected token (7:4)
You may need an appropriate loader to handle this file type.
| * @Last Modified time: 2018-11-20 10:41:58
| */
| body{
| background: #ccc;font-size: 100px;color: red;
| }
at doBuild (E:\Mall-fe\node_modules\webpack\lib\NormalModule.js:303:19)
at runLoaders (E:\Mall-fe\node_modules\webpack\lib\NormalModule.js:209:11)
at E:\Mall-fe\node_modules\loader-runner\lib\LoaderRunner.js:370:3
at iterateNormalLoaders (E:\Mall-fe\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
at E:\Mall-fe\node_modules\loader-runner\lib\LoaderRunner.js:202:4
at E:\Mall-fe\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
@ ./src/page/index/index.css
@ ./src/page/index/index.js
@ multi ./src/page/index/index.js
解决:不同版本对于配置文件的格式要求都不同。为了兼容降低版本到3.10.0webpack之后,改变loader写法如下
loaders: [
{ test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback : 'style-loader',
use : 'css-loader'
})
}, 问题解决
4.webpack dev server Not allowed to load local resource
问题解决:引用的CSS和JS必须使用相对路径,不能使用绝对路径。
5.Uncaught ReferenceError: webpackJsonp is not defined at
问题解决:生成的公用Js必须引用位置在私人JS之上。