layout/admin/index.vue插入cdn后，webpack打包会卡住
hsuanyi-chou opened this issue · 5 comments
hsuanyi-chou commented
在layout里面的index.vue中(app/web/component/layout/admin/index.vue)
用来显示首页的地方
在<head>内试着插入cdn连结，假设polyfill.js
插入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>后
执行npm run dev，webpack打包过程就会停住完全不动
个人猜测是把js的内容一起打包进去所以导致特别久，但不确定对不对
2019-04-17 09:13:57,774 INFO 2428 [master] node version v11.14.0
2019-04-17 09:13:57,776 INFO 2428 [master] egg version 2.21.1
2019-04-17 09:14:03,577 INFO 2428 [master] agent_worker#1:9892 started (5544ms)
2019-04-17 09:14:07,843 INFO 2428 [master] egg started on http://127.0.0.1:7001 (10067ms)
webpack build [========== ] 10% (0.0 seconds)
[webpack-tool] start webpack node building server: http://127.0.0.1:9001
webpack build [========== ] 10% (0.0 seconds)
[webpack-tool] start webpack web building server: http://127.0.0.1:9000
webpack build [============= ] 13% (2.9 seconds)
自己试过的方向：
- 放置不理会，看看最终有无打包好，放了近1小时仍没反应
- 插入别的js(如jquery, bootstrap)，照卡，只是停的%数不同。也就是只要有插入一个js的cdn就会卡住
- 换作业系统，在MacOS、Windows 下都一样
- 翻过不少webpack的文件，找不到解决方向
- 执行
npm cache clean --force，一样无效 - 重新安装所有套件，无用
PS: 有使用npm-check-updates把所有套件都更新到最新，且使用目前最新版本的Node.Js
先谢谢协助了
hubcarl commented
@hsuanyi-chou 先确认两点：
-
不插入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>，有无问题？ 或者说 直接 下载的骨架是否有问题？
-
如果有问题，用 yarn 试试看，看看是否可以正常运行？
hsuanyi-chou commented
@hsuanyi-chou 先确认两点：
- 不插入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>，有无问题？ 或者说 直接 下载的骨架是否有问题？
- 如果有问题，用 yarn 试试看，看看是否可以正常运行？
- 不插入时是可以正常打包的
- 用yarm 一样卡住
重新下载骨架，无修改任何东西来测试
先执行 npm i安装套件后，再执行npm run dev ，可正常运作
接着在index.vue加入<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>，再执行npm run dev
compile失败，有提示这段错误讯息 Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
怪了，我自己修改的版本却没有这种提示，却是卡在build过不去
请问若要在head加其余的js，该放在何处呢？
主要是想加bootstrap的js
完整错误讯息如下
> egg-vue-typescript-boilerplate@4.0.0 dev C:\Users\009652\Desktop\TEST
> egg-bin dev -r egg-ts-helper/register
[egg-ts-helper] create typings\app\extend\application.d.ts (7ms)
[egg-ts-helper] create typings\app\extend\context.d.ts (13ms)
[egg-ts-helper] create typings\app\controller\index.d.ts (5ms)
[egg-ts-helper] create typings\app\middleware\index.d.ts (4ms)
[egg-ts-helper] create typings\app\model\index.d.ts (6ms)
[egg-ts-helper] create typings\config\index.d.ts (14ms)
[egg-ts-helper] create typings\config\plugin.d.ts (7ms)
[egg-ts-helper] create typings\app\service\index.d.ts (5ms)
[egg-ts-helper] create typings\app\index.d.ts (3ms)
2019-04-18 16:03:59,752 INFO 20376 [master] node version v11.14.0
2019-04-18 16:03:59,753 INFO 20376 [master] egg version 2.21.1
2019-04-18 16:04:05,416 INFO 20376 [master] agent_worker#1:6428 started (5375ms)
2019-04-18 16:04:10,065 INFO 20376 [master] egg started on http://127.0.0.1:7001 (10311ms)
webpack build [========== ] 10% (0.0 seconds)
[webpack-tool] start webpack node building server: http://127.0.0.1:9002
webpack build [========== ] 10% (0.0 seconds)
[webpack-tool] start webpack web building server: http://127.0.0.1:9001
webpack build [====================================================================================================] 100% (7.2 seconds)
Build completed in 7.202s
× ｢wdm｣: Hash: ca40658fed34852e1f30
Version: webpack 4.28.4
Time: 7210ms
Built at: 2019-04-18 16:04:21
Asset Size Chunks Chunk Names
0.js 29.7 KiB 0 [emitted]
1.js 54.5 KiB 1 [emitted]
2.js 24.2 KiB 2 [emitted]
3.js 23.5 KiB 3 [emitted]
4.js 7.9 KiB 4 [emitted]
admin/home.js 396 KiB admin/home [emitted] admin/home
font/element-icons.ttf 10.8 KiB [emitted]
font/element-icons.woff 6.02 KiB [emitted]
font/fontawesome-webfont.eot 162 KiB [emitted]
font/fontawesome-webfont.ttf 162 KiB [emitted]
font/fontawesome-webfont.woff 95.7 KiB [emitted]
font/fontawesome-webfont.woff2 75.4 KiB [emitted]
img/fontawesome-webfont.svg 434 KiB [emitted]
ERROR in ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Errors compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
9 | <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
10 | <link rel="stylesheet" href="/public/asset/css/bootstrap.min.css">
11 | <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | </head>
| ^^^^^^^^^
13 | <body class="admin">
| ^^^^^^^^^^^^^^^^^^^^^^
14 | <div id="app">
| ^^^^^^^^^^^^^^^^^^
15 | <MainLayout>
| ^^^^^^^^^^^^^^^^^^
16 | <div slot="main">
| ^^^^^^^^^^^^^^^^^^^^^^^^^
17 | <slot></slot>
| ^^^^^^^^^^^^^^^^^^^^^^^
18 | </div>
| ^^^^^^^^^^^^^^
19 | </MainLayout>
| ^^^^^^^^^^^^^^^^^^^
20 | </div>
| ^^^^^^^^^^
21 | </body>
| ^^^^^^^^^
22 | </html>
| ^^^^^^^
23 | <div v-else-if="!isNode" id="app">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24 | <MainLayout>
| ^^^^^^^^^^^^^^
25 | <div slot="main">
| ^^^^^^^^^^^^^^^^^^^^^
26 | <slot></slot>
| ^^^^^^^^^^^^^^^^^^^
27 | </div>
| ^^^^^^^^^^
28 | </MainLayout>
| ^^^^^^^^^^^^^^^
29 | </div>
| ^^^^^^
@ ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& 1:0-221 1:0-221
@ ./app/web/component/layout/admin/index.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js??ref--0-1!./node_modules/ts-loader??ref--0-2!./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
@ ./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
@ ./app/web/page/admin/home/view/home/index.vue
@ ./app/web/page/admin/home/index.ts
i ｢wdm｣: Failed to compile.
webpack build [====================================================================================================] 100% (8.7 seconds)
Build completed in 8.729s
× ｢wdm｣: Hash: 8e4dce039e17c4ad84d5
Version: webpack 4.28.4
Time: 8738ms
Built at: 2019-04-18 16:04:23
Asset Size Chunks Chunk Names
asset/css/bootstrap.min.css 120 KiB [emitted]
asset/fonts/FontAwesome.otf 132 KiB [emitted]
asset/fonts/fontawesome-webfont.eot 162 KiB [emitted]
asset/fonts/fontawesome-webfont.svg 434 KiB [emitted]
asset/fonts/fontawesome-webfont.ttf 162 KiB [emitted]
asset/fonts/fontawesome-webfont.woff 95.7 KiB [emitted]
asset/fonts/fontawesome-webfont.woff2 75.4 KiB [emitted]
asset/fonts/glyphicons-halflings-regular.eot 19.7 KiB [emitted]
asset/fonts/glyphicons-halflings-regular.svg 106 KiB [emitted]
asset/fonts/glyphicons-halflings-regular.ttf 44.3 KiB [emitted]
asset/fonts/glyphicons-halflings-regular.woff 22.9 KiB [emitted]
asset/fonts/glyphicons-halflings-regular.woff2 17.6 KiB [emitted]
asset/images/favicon.ico 4.19 KiB [emitted]
asset/images/loading.gif 6.58 KiB [emitted]
asset/images/logo.png 35.2 KiB [emitted]
font/element-icons.ttf 10.8 KiB [emitted]
font/element-icons.woff 6.02 KiB [emitted]
font/fontawesome-webfont.eot 162 KiB [emitted]
font/fontawesome-webfont.ttf 162 KiB [emitted]
font/fontawesome-webfont.woff 95.7 KiB [emitted]
font/fontawesome-webfont.woff2 75.4 KiB [emitted]
img/fontawesome-webfont.svg 434 KiB [emitted]
js/chunk/0.js 92.2 KiB 0 [emitted]
js/chunk/1.js 768 KiB 1 [emitted]
js/chunk/2.js 87.1 KiB 2 [emitted]
js/chunk/3.js 9.09 KiB 3 [emitted]
js/chunk/4.js 165 KiB 4 [emitted]
js/chunk/admin/home.js 2.88 MiB admin/home [emitted] admin/home
js/runtime.js 33.6 KiB runtime [emitted] runtime
ERROR in ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Errors compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
9 | <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
10 | <link rel="stylesheet" href="/public/asset/css/bootstrap.min.css">
11 | <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | </head>
| ^^^^^^^^^
13 | <body class="admin">
| ^^^^^^^^^^^^^^^^^^^^^^
14 | <div id="app">
| ^^^^^^^^^^^^^^^^^^
15 | <MainLayout>
| ^^^^^^^^^^^^^^^^^^
16 | <div slot="main">
| ^^^^^^^^^^^^^^^^^^^^^^^^^
17 | <slot></slot>
| ^^^^^^^^^^^^^^^^^^^^^^^
18 | </div>
| ^^^^^^^^^^^^^^
19 | </MainLayout>
| ^^^^^^^^^^^^^^^^^^^
20 | </div>
| ^^^^^^^^^^
21 | </body>
| ^^^^^^^^^
22 | </html>
| ^^^^^^^
23 | <div v-else-if="!isNode" id="app">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24 | <MainLayout>
| ^^^^^^^^^^^^^^
25 | <div slot="main">
| ^^^^^^^^^^^^^^^^^^^^^
26 | <slot></slot>
| ^^^^^^^^^^^^^^^^^^^
27 | </div>
| ^^^^^^^^^^
28 | </MainLayout>
| ^^^^^^^^^^^^^^^
29 | </div>
| ^^^^^^
@ ./app/web/component/layout/admin/index.vue?vue&type=template&id=0e494c96& 1:0-221 1:0-221
@ ./app/web/component/layout/admin/index.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/thread-loader/dist/cjs.js??ref--0-1!./node_modules/ts-loader??ref--0-2!./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
@ ./app/web/page/admin/home/view/home/index.ts?vue&type=script&lang=ts&
@ ./app/web/page/admin/home/view/home/index.vue
@ ./app/web/page/admin/home/index.ts
@ multi (webpack)-hot-middleware/client?path=http://127.0.0.1:9001/__webpack_hmr&noInfo=false&reload=false&quiet=false ./app/web/page/admin/home/index.ts
i ｢wdm｣: Failed to compile.
>>EASY_ENV_IS_NODE create true
2019-04-18 16:04:24,059 DEBUG 15172 Resource#this.config.injectRes []
2019-04-18 16:04:24,061 INFO 15172 [-/127.0.0.1/-/541ms GET /] [access] 127.0.0.1: - GET / HTTP/200 22 - 537 - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36
hubcarl commented
@hsuanyi-chou 不好意思，没有及时看到这个 不能直接script，可以看看 https://www.yuque.com/easy-team/easywebpack/wb66pe
hubcarl commented
@hsuanyi-chou vue 不能直接 script 插入，解决方案 https://www.yuque.com/easy-team/easywebpack/wb66pe
hsuanyi-chou commented
好的！非常感谢您的帮忙！