前端学习遇到的问题

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 ()
    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), :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), :9:1)
    at _err1 (eval at create (E:\Mall-fe\node_modules\tapable\lib\HookCodeFactory.js:32:10), :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之上。