踩坑過程 哈哈哈哈！
------------vue, vue-loader, webpack, css-loader 安裝
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm i -S vue vue-loader
√ Installed 2 packages
√ Linked 30 latest versions
√ Run 0 scripts
peerDependencies WARNING vue-loader@* requires a peer of css-loader@* but none was installed
peerDependencies WARNING vue-loader@* requires a peer of webpack@^4.1.0 || ^5.0.0-0 but none was installed
√ All packages installed (33 packages installed from npm registry, used 13s(network 13s), speed 252.5kB/s, json 32(129.93kB), tarball 3.11MB)
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm i -D webpack
platform unsupported webpack@4.29.6 › watchpack@1.6.0 › chokidar@2.1.2 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 265 latest versions
√ Run 0 scripts
Recently updated (since 2019-03-03): 2 packages (detail see file F:\LearnCode\Vue\WebpackDemo\node_modules\.recently_updates.txt)
√ All packages installed (286 packages installed from npm registry, used 13s(network 12s), speed 147.71kB/s, json 266(500.92kB), tarball 1.27MB)
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm i -S css-loader
√ Installed 1 packages
√ Linked 17 latest versions
√ Run 0 scripts
Recently updated (since 2019-03-03): 5 packages (detail see file F:\LearnCode\Vue\WebpackDemo\node_modules\.recently_updates.txt)
√ All packages installed (11 packages installed from npm registry, used 2s(network 2s), speed 87.25kB/s, json 18(95.07kB), tarball 96.69kB)
------------webpack 和 webpack-cli 安裝
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ npm run build
> WebpackDemo@1.0.0 build F:\LearnCode\Vue\WebpackDemo
> webpack --config webpack.config.js
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): no
You need to install 'webpack-cli' to use webpack via CLI.
You can also install the CLI manually.
^C^C
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm i -D webpack-cli
√ Installed 1 packages
√ Linked 66 latest versions
√ Run 0 scripts
√ All packages installed (58 packages installed from npm registry, used 2s(network 2s), speed 67.5kB/s, json 67(148.13kB), tarball 3.26kB)
------------ run build
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ npm run build
> WebpackDemo@1.0.0 build F:\LearnCode\Vue\WebpackDemo
> webpack --config webpack.config.js
Hash: 6ce1c611403d9df283ba
Version: webpack 4.29.6
Time: 4553ms
Built at: 2019-03-10 17:31:47
1 asset
Entrypoint main = bundle.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]
[1] ./src/app.vue 218 bytes {0} [built] [failed] [1 error]
[3] ./index.js 206 bytes {0} [built]
+ 4 hidden modules
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for th is value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https ://webpack.js.org/concepts/mode/
ERROR in ./src/app.vue 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
> <template>
| <div id="test"> {{data}} 一個vue的組件 </div>
| </template>
@ ./index.js 2:0-31 10:16-19
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! WebpackDemo@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the WebpackDemo@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\aocn\AppData\Roaming\npm-cache\_logs\2019-03-10T09_31_47_1 12Z-debug.log
------------ run build
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ npm run build
> WebpackDemo@1.0.0 build F:\LearnCode\Vue\WebpackDemo
> webpack --config webpack.config.js
Hash: d42091103a49c6123165
Version: webpack 4.29.6
Time: 720ms
Built at: 2019-03-10 17:34:55
Asset Size Chunks Chunk Names
bundle.js 249 KiB main [emitted] main
Entrypoint main = bundle.js
[./index.js] 206 bytes {main} [built]
[./node_modules/_webpack@4.29.6@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app.vue] 218 bytes {main} [built] [failed] [1 error]
+ 4 hidden modules
ERROR in ./src/app.vue 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
> <template>
| <div id="test"> {{data}} 一個vue的組件 </div>
| </template>
@ ./index.js 2:0-31 10:16-19
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! WebpackDemo@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the WebpackDemo@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! C:\Users\aocn\AppData\Roaming\npm-cache\_logs\2019-03-10T09_34_55_187Z-debug.log
------------vue-loader 安裝 : 解析 .vue
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm install vue-loader --save-dev
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 454ms(network 450ms), speed 52.36kB/s, json 1(23.56kB), tarball 0B)
------------vue-template-compiler 安裝 :解析 .vue
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ npm run build
> WebpackDemo@1.0.0 build F:\LearnCode\Vue\WebpackDemo
> webpack --config webpack.config.js
Hash: 4ece753e2563e36254ee
Version: webpack 4.29.6
Time: 1387ms
Built at: 2019-03-10 17:43:39
Asset Size Chunks Chunk Names
bundle.js 250 KiB main [emitted] main
Entrypoint main = bundle.js
[./index.js] 206 bytes {main} [built]
[./node_modules/_webpack@4.29.6@webpack/buildin/global.js] (webpack)/buildin/glo bal.js 472 bytes {main} [built]
[./src/app.vue] 451 bytes {main} [built] [failed] [3 errors]
+ 4 hidden modules
ERROR in ./src/app.vue
Module Error (from ./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
@ ./index.js 2:0-31 10:16-19
ERROR in ./src/app.vue
Module Error (from ./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLo aderPlugin in your webpack config.
@ ./index.js 2:0-31 10:16-19
ERROR in ./src/app.vue
Module build failed (from ./node_modules/_vue-loader@15.7.0@vue-loader/lib/index .js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (F:\LearnCode\Vue\WebpackDemo\node_modules\_@vue_component-compiler -utils@2.6.0@@vue\component-compiler-utils\dist\parse.js:14:23)
at Object.module.exports (F:\LearnCode\Vue\WebpackDemo\node_modules\_vue-loa der@15.7.0@vue-loader\lib\index.js:67:22)
@ ./index.js 2:0-31 10:16-19
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! WebpackDemo@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the WebpackDemo@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\aocn\AppData\Roaming\npm-cache\_logs\2019-03-10T09_43_39_8 03Z-debug.log
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm i -D vue-template-compiler
√ Installed 1 packages
√ Linked 2 latest versions
√ Run 0 scripts
√ All packages installed (3 packages installed from npm registry, used 1s(network 1s), speed 89.8kB/s, json 3(8.74kB), tarball 117.52kB)
--------------------------- 安裝 vue-style-loader
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ npm run build
> WebpackDemo@1.0.0 build F:\LearnCode\Vue\WebpackDemo
> webpack --config webpack.config.js
Hash: cc7099186c2ed0e0f63f
Version: webpack 4.29.6
Time: 1321ms
Built at: 2019-03-10 17:47:49
Asset Size Chunks Chunk Names
bundle.js 256 KiB main [emitted] main
Entrypoint main = bundle.js
[./index.js] 206 bytes {main} [built]
[./node_modules/_webpack@4.29.6@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app.vue] 1.13 KiB {main} [built] [1 error]
[./src/app.vue?vue&type=script&lang=js&] 97 bytes {main} [built]
[./src/app.vue?vue&type=style&index=0&lang=css&] 185 bytes {main} [built] [failed] [1 error]
[./src/app.vue?vue&type=template&id=5ef48958&] 183 bytes {main} [built] [failed] [1 error]
+ 5 hidden modules
ERROR in ./src/app.vue
Module Error (from ./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./index.js 2:0-31 10:16-19
ERROR in ./src/app.vue?vue&type=style&index=0&lang=css& 17:0
Module parse failed: Unexpected character '#' (17:0)
You may need an appropriate loader to handle this file type.
|
|
> #test {
| border:2px solid red;
| }
@ ./src/app.vue 4:0-63
@ ./index.js
ERROR in ./src/app.vue?vue&type=template&id=5ef48958& 2:1
Module parse failed: Unexpected token (2:1)
You may need an appropriate loader to handle this file type.
|
> <div id="test"> {{data}} 一個vue的組件 </div>
|
@ ./src/app.vue 1:0-82 11:2-8 12:2-17
@ ./index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! WebpackDemo@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the WebpackDemo@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! C:\Users\aocn\AppData\Roaming\npm-cache\_logs\2019-03-10T09_47_49_443Z-debug.log
aocn@DESKTOP-D3M4BN9 MINGW64 /f/LearnCode/Vue/WebpackDemo
$ cnpm i -D vue-style-loader
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 233ms(network 229ms), speed 6.63kB/s, json 1(1.52kB), tarball 0B)
----- 無法加載 vue-loader 加載后的 .vue 檢查是否安裝了 css-loader, style-loader
--- npm install css-loader style-loader --save-dev
$ cnpm i -D style-loader
√ Installed 1 packages
√ Linked 2 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 442ms(network 438ms), speed 17.8kB/s, json 3(7.8kB), tarball 0B)
---------------------------------
---- success
$ npm run build
> WebpackDemo@1.0.0 build F:\LearnCode\Vue\WebpackDemo
> webpack --config webpack.config.js
Hash: 4f096f03c5c04a1a9190
Version: webpack 4.29.6
Time: 2043ms
Built at: 2019-03-10 19:00:17
Asset Size Chunks Chunk Names
bundle.js 279 KiB main [emitted] main
Entrypoint main = bundle.js
[./index.js] 206 bytes {main} [built]
[./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js?!./src/app.vue?vue&type=style&index=0&lang=css&] ./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&lang=css& 199 bytes {main} [built]
[./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js?!./src/app.vue?vue&type=script&lang=js&] ./node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 102 bytes {main} [built]
[./node_modules/_vue-loader@15.7.0@vue-loader/lib/loaders/templateLoader.js?!./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js?!./src/app.vue?vue&type=template&id=5ef48958&] ./node_modules/_vue-loader@15.7.0@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template&id=5ef48958& 295 bytes {main} [built]
[./node_modules/_vue-style-loader@4.1.2@vue-style-loader/index.js!./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js?!./src/app.vue?vue&type=style&index=0&lang=css&] ./node_modules/_vue-style-loader@4.1.2@vue-style-loader!./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib/loaders/stylePostLoader.js!./node_modules/_vue-loader@15.7.0@vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=style&index=0&lang=css& 1.57 KiB {main} [built]
[./node_modules/_webpack@4.29.6@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app.vue] 1.13 KiB {main} [built]
[./src/app.vue?vue&type=script&lang=js&] 286 bytes {main} [built]
[./src/app.vue?vue&type=style&index=0&lang=css&] 702 bytes {main} [built]
[./src/app.vue?vue&type=template&id=5ef48958&] 233 bytes {main} [built]
+ 8 hidden modules