【踩坑之旅】-webpack (v4.8.1) + vue-cli (v2.5.3)升级准备

一、重见天日

error  in ./src/App.vue?vue&type=style&index=0&lang=css

Module parse failed: Unexpected character '#' (15:0)
You may need an appropriate loader to handle this file type.
|
|
| #app {
|   font-family: 'Avenir', Helvetica, Arial, sans-serif;
|   -webkit-font-smoothing: antialiased;

@ ./src/App.vue 4:0-62
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue?vue&type=template&id=656039f0&scoped=true

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <div class="hello">
|   <h1>{{ msg }}</h1>
|   <h2>Essential Links</h2>

@ ./src/components/HelloWorld.vue 1:0-100 11:2-8 12:2-17
@ ./src/router/index.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/App.vue?vue&type=template&id=04c2046b

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <div id="app">
|   <img src="./assets/logo.png">
|   <router-view/>

@ ./src/App.vue 1:0-81 11:2-8 12:2-17
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=css

Module parse failed: Unexpected token (99:7)
You may need an appropriate loader to handle this file type.
|
|
| h1, h2 {
|   font-weight: normal;
| }

@ ./src/components/HelloWorld.vue 4:0-93
@ ./src/router/index.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/App.vue?vue&type=script&lang=js

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/App.vue 2:0-54 3:0-49 3:0-49 10:2-8
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/App.vue?vue&type=style&index=0&lang=css

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/App.vue 4:0-62
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/router/index.js 3:0-49 11:15-25
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue?vue&type=template&id=656039f0&scoped=true

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/components/HelloWorld.vue 1:0-100 11:2-8 12:2-17
@ ./src/router/index.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/App.vue?vue&type=template&id=04c2046b

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/App.vue 1:0-81 11:2-8 12:2-17
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue?vue&type=script&lang=js

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/components/HelloWorld.vue 2:0-61 3:0-56 3:0-56 10:2-8
@ ./src/router/index.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=656039f0&scoped=true&lang=css

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/components/HelloWorld.vue 4:0-93
@ ./src/router/index.js
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error  in ./src/App.vue

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

@ ./src/main.js 4:0-24 13:21-24
@ multi ./node_modules/_webpack-dev-server@3.1.4@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

二、偷天换日

1.Module parse failed: Unexpected character '#' (15:0)
You may need an appropriate loader to handle this file type.

大意是：

1、模块解析失败：意外字符'y'（15:0）

您可能需要一个合适的加载器来处理这个文件类型。

2. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

大意是：2。没有相应的插件使用VUE加载器。请确保在WebPACK配置中包含VueloDelpLuin。

三、去伪存真

这些烦人的家伙，开始一通搜索，发现没有一个遇到过，所以啊，都怪自己瞎折腾，求新，求新的，😔

上面已经提示的很明确了，缺少VueloDelpLuin，那么我们就来给他加上

找到：项目地址\build\webpack.dev.conf.js

项目地址\build\webpack.dev.conf.js

...
const portfinder = require('portfinder')
// 添加代码1
const { VueLoaderPlugin } = require('vue-loader');
...
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
// 添加代码2 VueLoaderPlugin
new VueLoaderPlugin(),

搞定，cnpm run dev，走起

warning

configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this 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/[/code] 哦哦，居然又警告出现！大意是：

“模式”选项尚未设置，WebPACK将回落到“生产”这个值。将“模式”选项设置为“开发”或“生产”，以启用每个环境的默认值。您也可以将其设置为“NONE”以禁用任何默认行为。了解更多：HTTPS://WebPACK.JS.Org/Vistus/MODE/

缺啥补啥，继续填坑吧！

因为项目是vue-cli生成的，所以配置文件分成了webpack.dev.conf.js和webpack.prod.conf.js，我们需要修改两处：相应环境替换成相应mode即可，比如开发环境就是：mode: "development"

...
const devWebpackConfig = merge(baseWebpackConfig, {
mode: "development", // "production" | "development" | "none"
...

搞定，cnpm run dev，走起

95% emitting CopyPlugin DONE  Compiled successfully in 2415ms10:57:00

I  Your application is running here: http://localhost:8080[/code] 至此，升级就配置修改完成了

- - - - - - - - - - - - - - - -✂- - - - - - - - - - - - - -✂-- - - - - - -- - - - - - - -✂- - - - - - -- - - - - - - - - -

万万没想到，今天试了下cnpm run build时，居然也报了一堆错啊，♥痛啊，今天手头有点忙，还未来得及整理和解决报错问题，敬请期待！