第204页ejs文件htmlwebpackPlugin中w应为大写

[zzy1661]

第10章webpack打包报错，找不到htmlwebpackPlugin,将w改为大写后通过

[chenbei0516]

666666

[icarusion]

感谢反馈，已修改，再次印刷时将更正。

[xiaoCong2014]

麻烦指明哪一面的哪一行要改 , 不然大家都要花时间找

[zhiyuanMain]

@xiaoCong2014 这一页的index.ejs文件代码

[wangyunan2018]

你好，请问index.ejs文件在哪儿，我看的电子版的，webpack4.0各种坑，起初安装完各种依赖后直接运行不起来了，后来网上搜的方法，需要重新换种依赖安装方式，然后就可以了，但是到了app.vue这儿就卡主了，按照书上的配置方法来配置好了之后，提示vue-loader和vueLoaderPlugin有问题，请问大家是怎么解决的，谢谢，下面是报错代码：（ERROR in ./app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./main.js 2:0-28 6:13-16

ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&scoped=true&lang=css& 18:3
Module parse failed: Unexpected token (18:3)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |
  |

div{
|
| font-size:30px;
@ ./app.vue 4:0-87
@ ./main.js

ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true& 2:0
Module parse failed: Unexpected token (2:0)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |

| hello {{name}}
|
@ ./app.vue 1:0-94 11:2-8 12:2-17
@ ./main.js
i ｢wdm｣: Failed to compile.）

[zzy1661]

我当时看的是webpack3；建议使用cli3初始化项目

…

------------------ 原始邮件 ------------------ 发件人: "wangyunan-github"<[email protected]>; 发送时间: 2019年9月17日(星期二) 中午11:55 收件人: "icarusion/vue-book"<[email protected]>; 抄送: "方法"<[email protected]>;"Author"<[email protected]>; 主题: Re: [icarusion/vue-book] 第204页ejs文件htmlwebpackPlugin中w应为大写 (#20) 你好，请问index.ejs文件在哪儿，我看的电子版的，webpack4.0各种坑，起初安装完各种依赖后直接运行不起来了，后来网上搜的方法，需要重新换种依赖安装方式，然后就可以了，但是到了app.vue这儿就卡主了，按照书上的配置方法来配置好了之后，提示vue-loader和vueLoaderPlugin有问题，请问大家是怎么解决的，谢谢，下面是报错代码：（ERROR in ./app.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ./main.js 2:0-28 6:13-16 ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&scoped=true&lang=css& 18:3 Module parse failed: Unexpected token (18:3) File was processed with these loaders: ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | div{ | | font-size:30px; @ ./app.vue 4:0-87 @ ./main.js ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true& 2:0 Module parse failed: Unexpected token (2:0) File was processed with these loaders: ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | hello {{name}} | @ ./app.vue 1:0-94 11:2-8 12:2-17 @ ./main.js i ｢wdm｣: Failed to compile.） — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[wangyunan2018]

好吧，谢谢，webpack4.0搞得我有点儿懵，牵一发动全身，哪儿都要改，醉了

…

------------------ 原始邮件 ------------------ 发件人: "zzy1661"<[email protected]>; 发送时间: 2019年9月20日(星期五) 下午2:13 收件人: "icarusion/vue-book"<[email protected]>; 抄送: "ㄨ今夕是何年、"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [icarusion/vue-book] 第204页ejs文件htmlwebpackPlugin中w应为大写 (#20) 我当时看的是webpack3；建议使用cli3初始化项目

------------------ 原始邮件 ------------------ 发件人: "wangyunan-github"<[email protected]>; 发送时间: 2019年9月17日(星期二) 中午11:55 收件人: "icarusion/vue-book"<[email protected]>; 抄送: "方法"<[email protected]>;"Author"<[email protected]>; 主题: Re: [icarusion/vue-book] 第204页ejs文件htmlwebpackPlugin中w应为大写 (#20) 你好，请问index.ejs文件在哪儿，我看的电子版的，webpack4.0各种坑，起初安装完各种依赖后直接运行不起来了，后来网上搜的方法，需要重新换种依赖安装方式，然后就可以了，但是到了app.vue这儿就卡主了，按照书上的配置方法来配置好了之后，提示vue-loader和vueLoaderPlugin有问题，请问大家是怎么解决的，谢谢，下面是报错代码：（ERROR in ./app.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ./main.js 2:0-28 6:13-16 ERROR in ./app.vue?vue&type=style&index=0&id=381730fa&scoped=true&lang=css& 18:3 Module parse failed: Unexpected token (18:3) File was processed with these loaders: ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | div{ | | font-size:30px; @ ./app.vue 4:0-87 @ ./main.js ERROR in ./app.vue?vue&type=template&id=381730fa&scoped=true& 2:0 Module parse failed: Unexpected token (2:0) File was processed with these loaders: ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | hello {{name}} | @ ./app.vue 1:0-94 11:2-8 12:2-17 @ ./main.js i ｢wdm｣: Failed to compile.） — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[wangyunan2018]

感谢

…

---原始邮件--- 发件人: "佚名猫"<[email protected]&gt; 发送时间: 2020年4月21日(星期二) 晚上9:33 收件人: "icarusion/vue-book"<[email protected]&gt;; 抄送: "Comment"<[email protected]&gt;;"wangyunan-github"<[email protected]&gt;; 主题: Re: [icarusion/vue-book] 第204页ejs文件htmlwebpackPlugin中w应为大写 (#20) @icarusion “ webpack”：“ ^ 4.42.1”版本升级后，npm run build报错 项目链接地址：https : //github.com/cnqiuxue/webpack-vue 错误如下： ERROR in ./app.vue Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ./main.js 7:11-31 ERROR in ./title.vue?vue&amp;type=style&amp;index=0&amp;id=1eba71ba&amp;scoped=true&amp;lang=css&amp; 16:3 Module parse failed: Unexpected token (16:3) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | &gt; h1 a { | color: #3399ff; | font-size: 24px; @ ./title.vue 4:0-89 @ ./app.vue?vue&amp;type=script&amp;lang=js&amp; @ ./app.vue @ ./main.js ERROR in ./app.vue?vue&amp;type=style&amp;index=0&amp;id=381730fa&amp;scoped=true&amp;lang=css&amp; 27:4 Module parse failed: Unexpected token (27:4) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | &gt; div { | color: #f60; | font-size: 24px; @ ./app.vue 4:0-87 @ ./main.js ERROR in ./button.vue?vue&amp;type=style&amp;index=0&amp;id=3a468140&amp;scoped=true&amp;lang=css&amp; 29:7 Module parse failed: Unexpected token (29:7) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | | &gt; button { | border: 0; | outline: none; @ ./button.vue 4:0-90 @ ./app.vue?vue&amp;type=script&amp;lang=js&amp; @ ./app.vue @ ./main.js ERROR in ./button.vue?vue&amp;type=template&amp;id=3a468140&amp;scoped=true&amp; 2:0 Module parse failed: Unexpected token (2:0) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | &gt; <button @click="handleClick" :style="styles"&gt; | <slot&gt;</slot&gt; | </button&gt; @ ./button.vue 1:0-97 11:2-8 12:2-17 @ ./app.vue?vue&amp;type=script&amp;lang=js&amp; @ ./app.vue @ ./main.js ERROR in ./app.vue?vue&amp;type=template&amp;id=381730fa&amp;scoped=true&amp; 2:0 Module parse failed: Unexpected token (2:0) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | &gt; <div id="app"&gt; | <v-title title="vue组件化"&gt;</v-title&gt; | <v-button @click="handleClick"&gt;点击按钮</v-button&gt; @ ./app.vue 1:0-94 11:2-8 12:2-17 @ ./main.js ERROR in ./title.vue?vue&amp;type=template&amp;id=1eba71ba&amp;scoped=true&amp; 2:0 Module parse failed: Unexpected token (2:0) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | &gt; <h1&gt; | <a :href="'#' + title"&gt;{{ title }}</a&gt; | </h1&gt; @ ./title.vue 1:0-96 11:2-8 12:2-17 @ ./app.vue?vue&amp;type=script&amp;lang=js&amp; @ ./app.vue @ ./main.js ERROR in main.84cd8e50d7dd3d32d263.js from UglifyJs Unexpected token: punc «(» [main.84cd8e50d7dd3d32d263.js:12766,15] webpack.prod.config.js文件： var webpack = require('webpack'); var HtmlwebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var merge = require('webpack-merge'); var webpackBaseConfig = require('./webpack.config'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 清空基本配置的插件列表 webpackBaseConfig.plugins = []; module.exports = merge(webpackBaseConfig, { output: { publicPath: '/dist', // 将入口文件重命名为带有20位hash值的唯一文件 filename: '[name].[hash].js' }, plugins: [ new ExtractTextPlugin({ //提取css，并重命名为带有20位hash值的唯一文件 filename: '[name].[hash].css', allChunks: true }), //定义当前node环境为生产环境 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), // // 压缩 js // new webpack.optimize.UglifyJsPlugin({ // compress: { // warnings: false // } // }), // 提取模板，并保存入口html文件 new HtmlwebpackPlugin({ filename: '../index_prod.html', template: './index.ejs', inject: false }) ], // 压缩js报错，网上搜索这样处理 optimization:{ minimizer:[ new UglifyJsPlugin({ uglifyOptions: { output: { comments: false }, compress: { warnings: false, drop_debugger: true, drop_console: true } } }) ] } }) package.json文件： "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^3.5.2", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^6.0.0", "html-webpack-plugin": "^4.2.0", "style-loader": "^1.1.4", "uglifyjs-webpack-plugin": "^2.2.0", "url-loader": "^4.1.0", "vue-hot-reload-api": "^2.3.4", "vue-loader": "^15.9.1", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.11", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3", "webpack-merge": "^4.2.2" }, "dependencies": { "vue": "^2.6.11" } 已解决 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[Envythink]

对，目前最新版是webpack4，里面各种坑，建议新手不要使用webpack4，否则找错是一件很费脑力和时间的活

[wangchuan-long]

感谢反馈，已修改，再次印刷时将更正。

p204的HtmlWebpackPlugin中的W改为大写后，p203页中webpack.prod.config.js里的代码第二行HtmlWebpackPlugin也应该改为大写，否则上面会引用两次，一次小写一次大写