vue-webpack配置过程及bug锦集
webpack的概念
网页中引用的一些静态资源
js
.js .jex .coffee .ts(TypeScript 类c#语言)
css
.css .less .sass .scss
Image
.jpg .png .gif .bmp .svg
字体文件(Fonts)
.svg .ttf .eot .woff .woff2
模板文件
.ejs .jade .vue(这是在webpack中定义组件的方式)
网页中引入过多静态资源后有什么问题
1，网页加载速度慢，因为会发起很多二次请求
2，要处理错综复杂的依赖关系
如何解决上述问题
1，合并、压缩、精灵图(多个图片合成一张图片)、图片的Base64编码
2，可以使用requireJS，webpack解决各个包之间的复杂依赖关系
如何完美实现上述两种解决方案
1，使用Gulp，是基于task任务的，处理的较小
2，使用webpack，基于整个项目进行构建
什么是webpack
webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具
安装webpack
npm i webpack -g 全局安装 ==> npm install webpack -g
webpack -v 查看安装的webpack版本
webpack可以做什么
1，webpack能够处理JS文件之间的相互依赖关系
2，webpack能够处理JS的兼容问题，把高级的浏览器不识别的语法转成低级的浏览器能识别的语法
webpack是怎么用的
npm install webpack -g
webpack --mode development //指定是开发(production)和是生产
webpack .\src\main.js -o .\dist\bundle.js //使用webpack处理js文件
(webpack 要打包的文件的路径 打包好的文件的路径)
webpack 构建的简介形式
创建 webpack.config.js 文件并配置
然后 terminal中直接输入 webpack 即可
webpack-dev-server 工具 实现自动打包编译的功能
1，运行npm i webpack-dev-server -D 把这个工具安装到项目本地开发依赖
2，安装完毕后，这个工具的用法和webpack命令的用法，完全一致
3，由于，我们是在项目中本地安装的webpack-dev-server(不是全局 -g 命令安装)，
无法当作脚本命令在 终端中直接运行
4，注意：webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack
cnpm i webpack -D
cnpm i webpack-dev-server -D
配置 package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack --mode production"
}
npm run dev
5，webpack-dev-server 打包生成的bundle.js文件，并没有存放到实际的物理磁盘上，而是，直接托管到了电脑的内存中，
所以，我们在项目根目录中根本就找不到这个打保函的bundle.js
6，webpack-dev-server 把打包好的文件以一种虚拟的形式，托管到了咱们项目的根目录中
，虽然看不到，但是等同于和dist src node-modules平级，有一个看不见的文件，叫做bundle.js
webpack-dev-server 的常用命令参数
第一种方法：package.json中
“dev”: “webpack-dev-server --open --port 8080 --contentBase src --hot”,
第二种方法：webpack.config.js
//启用热更新的第二步
// const webpack = require('webpack');
devServer:{ // 配置dev-server命令参数的第二种形式，相对来说，麻烦一些
//open --port 3000 --contentBase src --hot
open:true,//自动打开浏览器
port:3000,//设置启动时候的运行端口
contentBase:'src',//指定托管的根目录
hot:true //启用热更新的第一步
},
html-webpack-plugin插件配置
使用html-webpack-plugin插件配置启动页面(将html页面置于内存中，而不是之前的物理层)
作用如下：
1，在内存中生成一个页面
2，自动把打包好的bundle.js 插入到生成的内存页面DOM中去
启用步骤如下：
1，运行cnpm i html-webpack-plugin -D插件配置启动页面
2，修改webpack.config.js 配置文件如下
const webpack = require('webpack');
//导入在内存中生成 HTML 页面的插件
//只要是插件，都一定要放到 plugins 节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');
// 配置插件的结点
plugins:[
new webpack.HotModuleReplacementPlugin(),//new 一个热攻心的模块对象，这是启用热更新的第三部
//创建一个在内存中生成HTML页面的插件
new htmlWebpackPlugin({
template: path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，生成内存中的页面
filename:'index.html' //指定生成的页面的名称
})
]
};
3，npm run dev
loader配置，处理css文件
1， //这个节点，用于配置所用第三方模块加载器
module: {
rules: [//所有第三方模块的匹配规则
{test:/\.css$/, use: ['style-loader','css-loader']},
//配置处理 .css文件的第三方loader规则
]
}
2，cnpm i style-loader css-loader -D
3，npm run dev
url-loader,file-loader 模块配置
然后对于 图片加载的loader模块为
cnpm i url-loader file-loader -D
webpack.config.js module模块配置
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'} 图片类型
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'} 处理字体文件的loader
关于webpack和npm中的几个问题的说明
json里面不能写 // 注释
webpack中的babel的配置
main.js
通过 Babel，实现高级语法到低级语法的转化
1，在webpack中，可以运行如下两套命令，安装Babel相关的loader功能：
1.1 第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
1.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
2. 打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
2.1 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
2.2 注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉
2.2.1 如果不排除node_modules，则babel会把node_modules中所有的第三方js文件，都打包编译
太慢，而且耗费资源
3.在项目的根目录中，新建一个叫做 .babelrc 的babel配置文件，这个配置文件属于json格式，
所以不能写注释，字符串必须用双引号
3.1 在 .babelrc 写如下配置
{
"presets":[],
"plugins":["transform-runtime"]
}
3. 了解：目前安装的babel-preset-env 等于与版本字典，主要到语法对应版本，
然后使用另一套进行转换
5. webpack.config.js
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
//配置babel来转换高级的es语法
区分ewbpack中导入vue和普通网页导入vue的区别
main.js
在webpack中尝试使用vue：
注意：在webpack中使用 import Vue from 'vue'导入的vue构造函数，功能不完整
只提供了runtime-only的方式，并没有提供向网页中那样的使用方式
//import Vue from 'vue'
import Vue from '../node_modules/vue/dist/vue.js/'
//包的查找规则：
// 1，找项目根目录中有没有node_modules的文件夹
// 2，在node_modules中根据报名，找对应的vue文件夹
// 3，在vue文件夹中农，找一个叫做package。json的包配置问价
// 4，在package.json文件中，查找一个main属性（main属性制定了这个包在被加载时候的入口文件）
第二种方式：
webpack.config.js
module.exports中加入
resolve:{
alias:{//修改vue被导入时候的包的路径
"vue$":"vue/dist/vue.js"
}
}
在vue中结合render函数渲染指定的组件到容器中
使用vue之前先安装vue的包
cnpm i vue -S
main.js
//1，导入login组件 (新建一个vue文件，就是一个组件)
import login from './login.vue'
//默认 .webpack无法打包.vue文件，需要安装相应的loader
cnpm i vue-loader vue-template-compiler -D
//2，在配置文件中，新增loader配置项{test:/\.vue$/,use:'vue-loader'}
var vm = new Vue({
el:'#app',
data:{
msg:'123'
},
// render:function(createElements){
// return createElements(login)
// }
render:c=>c(login) //和上面的作用等价
})
webpack 结合vue使用的总结
1，安装vue 的包：cnpm i vue -S
2，有webpack中，推荐使用.vue这个组件末班文件定义组件，所以需要安装能解析这种文件的loader
cnpm i vue-loader vue-template-complier -D
3，在main.js中，导入vue模块：import Vue from 'vue'
4，定义一个.vue结尾的组件(就是下面的 login.vue)其中，组件有三部分组成：template script style
5，使用 import login from './login.vue' 导入这个组件
6，创建vm实例var vm = new Vue({el:'app',render:c=>c(login)})
7，在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域
export default 和 export 的使用方法
export default info
export var title = " 小星星"
import m222,{title} from './test.js'
使用export向外暴露的成员，只能使用{}的形式来接收，这中形式叫做[按需导出]
结合webpack使用vue-router
import Vue from 'vue' //导入 vue-router包
import VueRouter from 'vue-router' //手动安装VueRouter
Vue.use(VueRouter)
import app from './App.vue' //导入app组件
import account from './main/Account.vue' //导入account组件
var router = new VueRouter({
})//创建路有对象
结合webpack实现children子路由
创建路由对象
var router = new VueRouter({
routes:[
{
path:'/account',
component:account,
children:[
{path:'login',component:login},
{path:'register',component:register},
]
},
{path:'/goodslist',component:goodslist}
]
})
组件中style标签lang属性和scoped属性的介绍
<style lang="scss" scoped>
//普通的style标签只支持普通的样式，如果想要启用scss或less，需要为style元素设置lang属性
//对于在.vue组件中定义的style标签，建议都加上scoped属性，这样使得style样式作用于该组件
body{
div{
color:red;
}
}
</style>
抽离路由模块
将路由部分从main.js中拿出放在router.js中
export default router //把路由对象暴露出去
webpack配置bug锦集
1，Error: Please, upgrade your dependencies to the actual version of core-js@3
You should be able to simply update the version of the core-js module that is
requested within the warning message:
您应该能够简单地更新警告消息中要求的core-js模块的版本：
npm install --save core-js@^3
For what it's worth npm has a nifty feature that lets you see which packages are
outdated npm outdated
You can also update packages to the latest versions using the update command
2，because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIM
如果报这个错误，可能是引入文件的路径出错，注意一下main.js 中的文件引入路径，
以及html网页中的外部文件引入路径
3，[npm]npm install 时报错:npm WARN vueproject@1.0.0 No repository field.(缺少repository字段)
在当前项目中的package.json中添加: “private”: true
即用webstrom或其他编译器打开package.json后如下:
{
…
“private”: true
…
}
4，peerDependencies WARNING sass-loader@^8.0.2 requires a peer of sass@^1.3.0 but none was installed
peerDependencies WARNING sass-loader@^8.0.2 requires a peer of fibers@>= 3.1.0 but none was installed
重新安装node-sass和sass-loader:
cnpm install node-sass --save-dev;
cnpm install sass-loader --save-dev;
5，./node_modules/_vue-loader@15.7.1@vue-loader/lib/index.js You may need an additional load…
在webpack搭建的环境当中运行vue组件的时候报错，我已经下载了vue-template-compiler
和vue-loader,在render中还是无法正常显示组件内容，查了下资料发现是
Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生
VueLoaderPlugin的
所以我们要在这两个的基础上再去下载这个插件
cnpm i vue-loader -D
npm i vue-loader-plugin -S
然后在配置文件（webpack.config.js）那边要加上
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
6,ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin “transform-runtime” specified in “D:\app\python\test1\Vue\review1\.babelr
c” at 0, attempted to resolve relative to “D:\app\python\test1\Vue\review1”
at D:\app\python\test1\Vue\review1\node_modules\babel-core\lib\transformation\file\options\option-manager.
js:180:17
按照webpack中的babel的配置进行重新安装相关模块
main.js
通过 Babel，实现高级语法到低级语法的转化
1，在webpack中，可以运行如下两套命令，安装Babel相关的loader功能：
1.1 第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
1.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
2. 打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
2.1 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
2.2 注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉
2.2.1 如果不排除node_modules，则babel会把node_modules中所有的第三方js文件，都打包编译
太慢，而且耗费资源
3.在项目的根目录中，新建一个叫做 .babelrc 的babel配置文件，这个配置文件属于json格式，
所以不能写注释，字符串必须用双引号
3.1 在 .babelrc 写如下配置
{
"presets":[],
"plugins":["transform-runtime"]
}
3. 了解：目前安装的babel-preset-env 等于与版本字典，主要到语法对应版本，
然后使用另一套进行转换
7，Module build failed (from ./node_modules/_vue-loader@15.9.0@vue-loader/lib/index.js):
TypeError: Class constructor LRUCache cannot be invoked without 'new’
把node_modules 删除之后，输入以下命令(一定这个顺序)：
1 npm install vue-template-compiler -D
2 npm install
3 npm run dev
8,webpack打包vue文件报错：ERROR in ./src/App.vue 1:0 Module parse failed: Unexpected token (1:0) You may need
webpack默认不能处理vue文件，只能自己添加额外的插件进行处理
解决报错如下：
安装两个拓展插件
npm i vue-loader vue-template-compiler -D
然后在webpack.config.js添加如下配置：
module: {
rules: [
{ test:/\.vue$/, loader: 'vue-loader' }
]
}
如果仍然报错
可能是由于vue-router版本是15以上引起的
需要再额外添加如下配置
webpack.config.js文件：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
plugins: [ //配置插件的节点，所有插件都要在这里配置
new VueLoaderPlugin()
],
module: {
rules: [
{ test:/\.vue$/, loader: 'vue-loader' }
]
}
};
9,ERROR in ./src/main.js,Module not found: Error: Can’t resolve ‘/subcom/login.vue’ in’D:\app\python\test1\Vue\review4\src’
@ ./src/main.js 23:13-41
这个错误可能是因为你要导入的node_modules文件要么不在里面，也就是模块未安装上
要么就是 main.js 中的文件引入路径出错，核查一下文件路径
10,Module not found: Error: Can’t resolve ‘vue’
webpack 缺少Vue的包
解决办法：
在当前目录下导入vue的包
cnpm i vue -S
另外
需要注意的是，
有时候package.json中安装过的模块不一定现在还存着，这个时候可能要重新安装一下
删除node_modules文件夹重新 cnpm i 也是一个方法
扫一扫
5272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
