本篇笔记为学习网易公开课后做的笔记,课程是网易谭金龙老师讲的, 地址:https://study.163.com/sl/VsaN
请勿直接爬走,本文地址:https://www.cnblogs.com/xiaoxuStudy/p/13492608.html
本篇笔记的内容不一定完全正确,因为我有的地方不懂,先把笔记做下来, 如果有错误的地方麻烦指出,谢谢。
目录:
1. vue-cli 的工作原理
2. 用 webpack 搭建 vue 项目
一. vue-cli 的工作原理
如果为了“开箱即用”,可以使用命令 vue create project 或 vue init webpack project 去创建 vue 项目, “开箱即用”是约定大于配置,简单来说就是能不配置就不配置按照人家的方式来,作者不建议配置但是不会拦着我们去配置。但是如果想要成为一个高级前端工程师或架构师,最好要理解 vue-cli 的架构原理。
脚手架:主体结构全部搭建好了,我们可以在利用这个主体结构去完成我们的需求
vue-cli 不是一个单独的东西,甚至它不是一个东西,它自己也没有什么特别的功能,它其实是 git 上的一个项目,或者说它就是一堆文件,真正有功能的是 webpack。可以到 github 上看看,搜索 webpack, 点击下图这个进去看看
![使用 webpack 搭建 vue 开发环境_第1张图片](http://img.e-com-net.com/image/info8/6f0f22d9c9e94ad2b15ccb09d483bdca.jpg)
点 template 进去看看
![使用 webpack 搭建 vue 开发环境_第2张图片](http://img.e-com-net.com/image/info8/0eefc6e4f56f4bba8a1f0818f5871e72.png)
下图这个目录就是使用命令 vue init webpack xxx 时下载的东西,使用的时候用命令 npm run start 去启动这些东西
![使用 webpack 搭建 vue 开发环境_第3张图片](http://img.e-com-net.com/image/info8/a5f01accb44e46208cef182a00565dbc.jpg)
但是,现在使用的基本上都是 vue-cli3.x 或者 vue-cli4.x,vue-cli3.x 是基于 webpack4 打造的,vue-cli2.x 是基于 webpack3 打造的,webpack3 跟 webpack4 的区别挺大的,所以不建议全局安装 webpack,因为如果不同的项目是基于不同的 webpack 但是又全局安装了 webpack,这样子就可能会出问题。
vue-cli3 学习了 rollup 的零配置思路,所以在项目初始化之后没有以前的一些东西了,也找不到配置文件了,这帮助开发者解决了绝大部分情形下的 webpack 配置,但是,我们还是很有必要去了解 webpack 的。
vue-cli 这个脚手架其实什么都没干,其实,vue-cli 就是一个下载器,官方叫 vue-cli 启动器,它的作用是帮助我们快速去建立一些基本项目,但是这个项目不是完全空白的,有些基本的东西,比如说可以根据选择的项目的不同下载不同的依赖、根据我们的选择更改项目名、可以选择单元测试方法是单元测试还是一对一测试。
接着上面看 github 的东西,打开 package.json 看看
![使用 webpack 搭建 vue 开发环境_第4张图片](http://img.e-com-net.com/image/info8/bb2f9fba409f44ae92cdc632bfab3d73.jpg)
可以看到 package.json 里面有各种各样的 loader,webpack 只能处理 js 文件,webpack 不认识 vue,loader 的作用就是把 vue 文件转成 js 文件,之后配置上 plugin 各种扩展功能。总结一下,webpack 中的 loader 是为了将 webpack 不认识的文件转成 js 文件。各种 loader、plugin 为 webpack扩展功能,所以 vue-cli 没有这么了不起,真正牛逼的是 webpack。vye
了解 vue-cli 工作原理之后,可以利用 webpack 自己去搭建一个 vue 的开发环境。总而言之,vue-cli 是一个下载器,它从 git 上去下载一个目录。
二. 用 webpack 搭建 vue 项目
下面利用 webpack 去搭建去架构一个 vue 的开发环境,甚至可以说是自己去架构一个 vue-cli。
例子
首先新建一个文件夹,我新建了个 0812 文件夹,到该目录下生成一个 package.json 工程管理文件
命令: yarn init -y
![使用 webpack 搭建 vue 开发环境_第5张图片](http://img.e-com-net.com/image/info8/fefe0b3c7b864f2697ececab1953937f.jpg)
因为要利用 webpack 去搭建去架构一个 vue 的开发环境,所以要把 webpack 拿下来。不建议全局安装 webpack。其中 webpack-cli 是一个简易客户端,用于与 webpack 协议连接,在 webpack3 里它本身和客户端是在同一个包里的,但是在 webpack4 里它们是分开的,所以在 webpack4 里要通过命令 yarn add -D webpack webpack-cli 去下载 webpack,同时安装 webpack-cli。
命令: yarn add -D webpack webpack-cli
![使用 webpack 搭建 vue 开发环境_第6张图片](http://img.e-com-net.com/image/info8/66e18ec560a146ecac4bc9af47c36676.jpg)
新建一个 html 文件
命令: touch index.html
![](http://img.e-com-net.com/image/info8/7c640c57b14b40838db1ae211c4d9b3b.png)
新建一个 src 文件
命令: mkdir src
![](http://img.e-com-net.com/image/info8/dd38a00e96a943d48068f51985286e5c.png)
在 src 目录下新建一个 components
命令: mkdir components
![](http://img.e-com-net.com/image/info8/2532455cc42b402dbd73023525d83674.png)
使用 vscode 打开文件 0812
![使用 webpack 搭建 vue 开发环境_第7张图片](http://img.e-com-net.com/image/info8/3b4bc05fb6f041b9a94127b3118c286c.jpg)
可以在 components 目录下新建文件,我这里新建一个 xwh.js,然后编辑 xwh.js
可以从 vue/dist/vue.esm 引入 Vue,vue.esm 支持 es module 的 import...from 语句,所以引入这个。
(我后来运行代码时报错了,上网搜索后发现需要引入 vue,命令:npm i vue -S)
![使用 webpack 搭建 vue 开发环境_第8张图片](http://img.e-com-net.com/image/info8/3cb31bf36c4e424f9eabc147954fd916.jpg)
接着,新建一个 vm,传入各种配置。注册一个组件 components,局部注册一个 xwh 组件,在 data 里 return 一个 msg,在 components 里的写 template 。在 components 外的 template 里将组件 xwh 挂载起来。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
import Vue from "vue/dist/vue.esm";
const vm = new Vue({
el: "#app",
data: {},
template: `
`,
components: {
xwh: {
data() {
return {
msg: "小许想要快点找到工作",
};
},
template: `
{{ msg }}
`,
},
},
});
xwh.js
![使用 webpack 搭建 vue 开发环境_第9张图片](http://img.e-com-net.com/image/info8/a0dca586dc4647fd8a830644d47a8bc7.png)
在目录 0812 下新建一个 webpack.config.js, webpack.config.js 是一个 webpack 的默认配置文件。
在 webpack.config.js 里面写配置。首先,写向外暴露的东西。
首先设置模式,mode 有 3 个值可选:development、production、none(可参考官网或网络资料,官网:https://webpack.js.org/configuration/mode/, 网络资料:https://blog.csdn.net/cuipp0509/article/details/105329735/),主要区别就是打包时压缩跟不压缩,development 对应的是开发环境,不需要压缩,production 对应的是生产环境,需要压缩,这里设置为 none( 对应语句:mode:'none' )。
然后,要找入口,设置入口,入口就找 “./src/components/xwh.js” 这个路径下的( 对应语句:entry:'./src/components/xwh.js')。
然后,要找出口,设置打包输出的路径,首先通过 node 里面的 path 模块拿进来( 对应语句:const path = require('path'); ),然后指定 path 跟 filename( 对应语句: output:{ path: path.resolve(__dirname, 'dist'), filename:'bundle.js' } )。至此,基本写好了一个 webpack 打包配置文件。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
module.exports = {
// 模式
mode:'none',
// 入口
entry:'./src/components/xwh.js',
// 打包输出的路径
output:{
path: path.resolve(__dirname, 'dist'),
filename:'bundle.js'
}
}
webpack.config.js
![使用 webpack 搭建 vue 开发环境_第10张图片](http://img.e-com-net.com/image/info8/17ae2f0a2aa84dfc86031d1883f93bea.png)
执行 webpack
命令: npx webpack
![使用 webpack 搭建 vue 开发环境_第11张图片](http://img.e-com-net.com/image/info8/be7e69ec9c914d45bc60bd7ca0a2e832.png)
可以看到打包生成了一个目录 dist 跟文件 bundle.js
![使用 webpack 搭建 vue 开发环境_第12张图片](http://img.e-com-net.com/image/info8/5c3244065096471582a847a525937690.jpg)
使用 bundle.js。打开 index.js,引入 bundle.js
index.html
![使用 webpack 搭建 vue 开发环境_第13张图片](http://img.e-com-net.com/image/info8/ac759ec6ad11428288899ffb8b7c5d1e.jpg)
页面表现:
![使用 webpack 搭建 vue 开发环境_第14张图片](http://img.e-com-net.com/image/info8/a1ee49a1d9e74d1ebb296ed3147a9b22.jpg)
页面显示了 xwh.js 里 msg 的值
![使用 webpack 搭建 vue 开发环境_第15张图片](http://img.e-com-net.com/image/info8/491608a3fec54b8ca07eebc6794f57cb.png)
现在把 msg 改一下,然后在浏览器刷新页面,会发现内容并没有发生变化
![](http://img.e-com-net.com/image/info8/91712e3005104278ab5bae60f2c1959e.png)
![使用 webpack 搭建 vue 开发环境_第16张图片](http://img.e-com-net.com/image/info8/a1ee49a1d9e74d1ebb296ed3147a9b22.jpg)
改了之后需要重新打包,重新打包才可以发生改变。
![使用 webpack 搭建 vue 开发环境_第17张图片](http://img.e-com-net.com/image/info8/b943c71d15e9425fbabe88401e2c4df5.png)
![使用 webpack 搭建 vue 开发环境_第18张图片](http://img.e-com-net.com/image/info8/49d74affeb124d679768b9a6811fd998.jpg)
每更新一次就需要重新打包一次,很麻烦。引入 webpack-dev-server 可以解决这个问题,webpack-dev-server 用于开发调试,提供 web 服务,热更新,接口代理等。
命令: yarn add -D webpack-dev-server
![使用 webpack 搭建 vue 开发环境_第19张图片](http://img.e-com-net.com/image/info8/05cf4889b0fb4ba9a0c705287a4c4d67.jpg)
执行 webpack-dev-server
命令: npx webpack-dev-server
![使用 webpack 搭建 vue 开发环境_第20张图片](http://img.e-com-net.com/image/info8/d428bcb7e19142b0b128a664f3b44b56.jpg)
![使用 webpack 搭建 vue 开发环境_第21张图片](http://img.e-com-net.com/image/info8/7f3e1c875ad341e2bb4e78d456ac5d6a.jpg)
在 xwh.js 中更改 msg,刷新页面后发现仍然没有实现实时更新。
![使用 webpack 搭建 vue 开发环境_第22张图片](http://img.e-com-net.com/image/info8/aec92546b03f4e86a44156bb7e81fc10.png)
![使用 webpack 搭建 vue 开发环境_第23张图片](http://img.e-com-net.com/image/info8/7f3e1c875ad341e2bb4e78d456ac5d6a.jpg)
之所以不能实时更新,是因为在 index.html 中引用 bundle.js 的路径错了,因为使用了 webpack-dev-server,所以路径在根目录下,修改路径后刷新页面后就能实现实时更新了。
![使用 webpack 搭建 vue 开发环境_第24张图片](http://img.e-com-net.com/image/info8/771bdbf7014f46de90745542083d9ee7.png)
![使用 webpack 搭建 vue 开发环境_第25张图片](http://img.e-com-net.com/image/info8/740f39b64a844ba0b92ec38388b604b8.jpg)
现在,只要直接更改 msg 就实现在页面上实时更新。
在 xwh.js 中更改 msg,刷新页面后发现实现了实时更新。
![使用 webpack 搭建 vue 开发环境_第26张图片](http://img.e-com-net.com/image/info8/005a591b36b4433eb36e040d1e9da8dd.png)
![使用 webpack 搭建 vue 开发环境_第27张图片](http://img.e-com-net.com/image/info8/410559e07fa04b688ae090e2f4705df9.jpg)
webpack-dev-server 打包后的 js 文件是在内存里边维护的,内存里的文件有一个问题:如果服务器重启,内存里的数据就没了。
所以,如果是部署在生产环境时使用 webpack-dev-server 的话会出问题,因为服务器需要隔段时间进行重启,一重启内存里的数据就没了。
因此,在开发的时候,并不需要去生成文件,只需要在内存里维护一份。但是,在项目开发完毕之后,必须要生成文件,如果内存里维护一份,服务器重启之后内存里的文件就没了。
所以,使用 webpack 搭建 vue 开发环境是,需要去区分到底现在是在开发还是生产。
在 0812 目录下新建一个 config,在 config 下新建 webpack.development.js 跟 webpack.production.js。
编辑 webpack.development.js 跟 webpack.production.js
![](http://img.e-com-net.com/image/info8/47db6927a4b64c3ea2b0cbfd8f2d86ef.png)
![](http://img.e-com-net.com/image/info8/96ae64072a894350bf4bebcb391a87c5.png)
为了判断是开发还是生产,下面需要修改 webpack.config.js。
webpack 可以进行命令行的环境配置,可以在命令行中传入任何参数,这会在配置文件中映射为对应的参数。向外暴露一个函数,参数为 env,这个 env 是可以接收传入的值,如果没有传入参数则 env 为空对象。然后,设置入口文件为 xwh.js 。然后,判断传入的 env,如果是 development,就 require webpack.development.js,否则 require webpack.production.js,拿到文件要将它展开。
(扩展运算符的作用,网络资料:https://segmentfault.com/a/1190000016753384?utm_source=tag-newest)
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
module.exports = (env) => {
env = env || {};
return {
entry: "./src/components/xwh.js",
...env.development ? require('./config/webpack.development') : require('./config/webpack.production')
};
}
webpack.config.js
![使用 webpack 搭建 vue 开发环境_第28张图片](http://img.e-com-net.com/image/info8/e5b3668850dc4718ada0b8c49eddc7b1.jpg)
传入参数 development
命令: npx webpack --env.development
![使用 webpack 搭建 vue 开发环境_第29张图片](http://img.e-com-net.com/image/info8/5a560dd0cfb64c8ca282489503dc75e0.jpg)
传入参数 production
命令: npx webpack --env.production
![使用 webpack 搭建 vue 开发环境_第30张图片](http://img.e-com-net.com/image/info8/dbacb909e06c49e1b328e6a847d2d97f.jpg)
上面实现了在命令行传入不同的参数调用不同的文件,但是这样不方便。可以在 package.json 里进行更改,设置如果是 dev 的话,设置为 webpack-dev-server 传入参数 env.development,如果是 build 的话,直接执行打包传入参数 env.production。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
{
"name": "0812",
"scripts": {
"dev": "webpack-dev-server --env.development --open",
"build": "webpack --env.production"
},
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.6.11"
}
}
package.json
![使用 webpack 搭建 vue 开发环境_第31张图片](http://img.e-com-net.com/image/info8/af0e914186b94798afe022922111c12a.png)
执行 dev
命令: yarn dev
![使用 webpack 搭建 vue 开发环境_第32张图片](http://img.e-com-net.com/image/info8/54e6f97968ea4187b16e85640b643e6a.jpg)
执行 build
命令: yarn build
![使用 webpack 搭建 vue 开发环境_第33张图片](http://img.e-com-net.com/image/info8/4378d7b62e23458abf4dfa060f134854.jpg)
实现了判断是开发还是生产后,可以继续编写配置文件 webpack.development.js 跟 webpack.production.js。
为了与 vue 的结构尽量相同,删除之前生成的 dist 目录。
![使用 webpack 搭建 vue 开发环境_第34张图片](http://img.e-com-net.com/image/info8/25631d3e81cd4513b999e521e8036704.png)
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
module.exports = {
// 开发模式, 在内存里维护, 不需要压缩与生成文件
mode:'development',
// 打包输出的路径
output:{
filename:'bundle.js',
},
};
webpack.development.js
![使用 webpack 搭建 vue 开发环境_第35张图片](http://img.e-com-net.com/image/info8/6577b02823484be68a21efcbc6a78ddc.png)
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
module.exports = {
// 生产模式
mode:'production',
// 打包输出的路径
output:{
path: path.resolve(__dirname, '../build'),
filename:'bundle.min.js'
}
}
webpack.production.js
![使用 webpack 搭建 vue 开发环境_第36张图片](http://img.e-com-net.com/image/info8/b2510b81cfa94344b9630245067da66c.png)
执行 dev
命令: yarn dev
![使用 webpack 搭建 vue 开发环境_第37张图片](http://img.e-com-net.com/image/info8/63ec501f5a7d4f5e8c0bd27d35b0cc7c.jpg)
执行 build,生成文件
命令: yarn build
![使用 webpack 搭建 vue 开发环境_第38张图片](http://img.e-com-net.com/image/info8/e7e9f5773f924b84af03950eaaff6b4c.png)
![使用 webpack 搭建 vue 开发环境_第39张图片](http://img.e-com-net.com/image/info8/31abd5871aac49c3932a618f9556bdd0.jpg)
现在有一个问题,index.html 里面的 src 是写死的。生产时,打包后的引用的路径应该是 <script src="./build/bundle.min.js">script> ,开发时,引用的路径应该是 <script src="/bundle.js">script> 。每次都要手动去进行更改很麻烦。
解决的办法是连 html 也一起打包了,需要引入插件 html-webpack-plugin 。
首先,在 0812 文件夹下新建一个 public 目录,将 index.html 移动到 public 目录下。然后,将 index.html 里引用文件的语句删掉。
![使用 webpack 搭建 vue 开发环境_第40张图片](http://img.e-com-net.com/image/info8/ab659ab926874a90b2450455e418ec5f.jpg)
引入插件
命令: yarn add -D html-webpack-plugin
![使用 webpack 搭建 vue 开发环境_第41张图片](http://img.e-com-net.com/image/info8/aa8c69c3bae0445fb131f32dae42c365.jpg)
使用 html-webpack-plugin。在 webpack.development.js 里 require 它。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 开发模式, 在内存里维护, 不需要压缩与生成文件
mode:'development',
// 打包输出的路径
output:{
filename:'bundle.js',
},
plugins: [
new htmlWebpackPlugin({
//模板文件
template: "public/index.html",
//文件名
filename: "index.html",
}),
],
};
webpack.development.js
![使用 webpack 搭建 vue 开发环境_第42张图片](http://img.e-com-net.com/image/info8/5c613187e6e241758748ecb053b1f7a9.png)
在 webpack.production.js 里 require 它。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 模式
mode:'production',
// 打包输出的路径
output:{
path: path.resolve(__dirname, '../build'),
filename:'bundle.min.js'
},
plugins: [
new htmlWebpackPlugin({
//模板文件
template: "public/index.html",
//文件名
filename: "index.html",
}),
],
}
webpack.production.js
![使用 webpack 搭建 vue 开发环境_第43张图片](http://img.e-com-net.com/image/info8/9ca5f0e48dae47e9b7ebc466bca4ee5e.png)
执行生产环境下的,打包后会发现 build 目录下多了一个 index.html 文件,右键单击 index.html 选择 open with live server 在浏览器查看一下。如果此时更改 xwh.js 里 msg 的值,要重新执行命令 npx webpack 之后页面内容才会更新。
命令: npx webpack
![使用 webpack 搭建 vue 开发环境_第44张图片](http://img.e-com-net.com/image/info8/f845523ba73c4aca8b24ca1e7f2c75cb.jpg)
![使用 webpack 搭建 vue 开发环境_第45张图片](http://img.e-com-net.com/image/info8/7065c73dcaf54a768aa883ccdf9a5f2b.jpg)
![使用 webpack 搭建 vue 开发环境_第46张图片](http://img.e-com-net.com/image/info8/2c035f40201c4a7292b546d0c2fa3293.jpg)
执行开发环境下的。如果此时更改 xwh.js 里 msg 的值,页面内容也会随之改变。
命令: yarn dev
![使用 webpack 搭建 vue 开发环境_第47张图片](http://img.e-com-net.com/image/info8/b6c71381b656411db9e5296513e0b21a.jpg)
![使用 webpack 搭建 vue 开发环境_第48张图片](http://img.e-com-net.com/image/info8/dffa1c98d4c34251bcf36a6de15d011f.jpg)
目前实现了生产模式跟开发模式的判断,也把 html 打包了。
目前存在一个问题,我们平时在做 vue 开发的时候用的是组件,组件的的扩展一般是 .vue,xwh.js 是 .js 显然不是 vue 开发环境,之前在 xwh.js 里的写法是 vue1.0 的写法,所以需要对 vue 的开发环境进行升级。
在 webpack 中,如果要识别除了 js 和 json 以外的文件,需要安装 loader 去识别。plugin 的主要作用是扩展功能。要识别什么文件就使用什么 loader,比如说,如果要识别 vue 文件,就用 vue-loader,如果要识别 css 文件,就用 css-loader。
取得 vue-html-loader。vue-html-loader 用于解析 vue2.0 组件里的是 template。
命令: yarn add -D vue-html-loader
取得 vue-loader。vue-loader 用于解析 vue 文件。
命令: yarn add -D vue-loader
取得 vue-template-comiler。vue-template-compiler 是个编译器,专门用来把 vue 里的东西分别编译出来,比如说分别编译出 html、css、js。
命令: yarn add -D vue-template-compiler
![使用 webpack 搭建 vue 开发环境_第49张图片](http://img.e-com-net.com/image/info8/dd301f614e0549db98d214f33ee4aae7.jpg)
![](http://img.e-com-net.com/image/info8/0df05631c1bb4e14a16a5a3d01f51e7c.jpg)
![使用 webpack 搭建 vue 开发环境_第50张图片](http://img.e-com-net.com/image/info8/1b8bf6949932478f9af27f64e15022c7.jpg)
在 src/components 目录下新建文件 Xwh.vue,在 src 目录下新建 App.vue、main.js。
(这些文件的作用可以参考网络资料:https://blog.csdn.net/qq_34182808/article/details/86690193)
编写 main.js。引进 vue.esm、App.vue,挂载 App.vue
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
import Vue from 'vue/dist/vue.esm';
import App from './App.vue';
new Vue({
el:"#app",
components:{
App
},
template:`
`
})
main.js
![使用 webpack 搭建 vue 开发环境_第51张图片](http://img.e-com-net.com/image/info8/c21d6621a551426795364f0b88c89de8.png)
编写 App.vue。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
App.vue
![使用 webpack 搭建 vue 开发环境_第52张图片](http://img.e-com-net.com/image/info8/5cf5ac55baaf45c9b5244cacb678908e.png)
编写 Xwh.vue。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
Xwh.vue
![使用 webpack 搭建 vue 开发环境_第53张图片](http://img.e-com-net.com/image/info8/f6b9bc2698304f1690c79e2c3abd651c.png)
将 webpack.config.js 的入口路径由 xwh.js 改为 main.js,写 loader 的规则,如果有 .vue 结尾的文件则用 vue-loader 处理。
rules 配置模块的读取和解析规则,通常用来配置 Loader,配置一项 rules 时大致可通过条件匹配、应用规则、重置顺序这几种方式完成,其中条件匹配是通过 test、include、exclude 三个配置项来选中 Loader 要应用的规则,应用规则是对选中的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从右往左的顺序应用一组 Loader。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
module.exports = (env) => {
env = env || {};
return {
// entry: "./src/components/xwh.js",
entry: "./src/main.js",
module:{
rules:[
{test:/\.vue$/, use:"vue-loader"}
],
},
...env.development ? require('./config/webpack.development') : require('./config/webpack.production')
};
}
webpack.config.js
![使用 webpack 搭建 vue 开发环境_第54张图片](http://img.e-com-net.com/image/info8/40005a476c5841a9a3af80f85a275e1a.jpg)
因为需要识别 loader,写好组件之后,在 webpack.development.js 跟 webpack.production.js 引入 vue-loader。
![使用 webpack 搭建 vue 开发环境_第55张图片](http://img.e-com-net.com/image/info8/1e862a71583e40f78813ca06507c9357.jpg)
开发环境执行一下,命令: yarn dev
![使用 webpack 搭建 vue 开发环境_第56张图片](http://img.e-com-net.com/image/info8/9b6063e6b3344493b2d1bf7e0fa3f909.png)
至此,通过各种配置文件与 loader ,已经基本实现了开发环境。
但是,存在一个问题,在实际的开发中可能会写一些样式,还可能需要处理路径问题。
下面使用 resolve 处理路径问题,在导入语句没带文件后缀时,Webpack 会自动带上后缀去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表。设置 extension:['.js', '.json', '.vue'] 的话,当遇到 import App from './App'; 语句时,webpack 首先会寻找 ./App.js ,如果找不到的话,找 ./App.json,如果找不到的话,找 ./App.vue,如果找不到的话,报错。尝试把 App.vue 里导入的 vue 文件的后缀去掉,在命令行输入 yarn dev 没有报错,页面正常显示, 说明 resolve.extensions 设置成功。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
module.exports = (env) => {
env = env || {};
return {
entry: "./src/main",
module:{
rules:[
{test:/\.vue$/, use:"vue-loader"}
],
},
resolve:{
extensions:['.js', '.json', '.vue']
},
...env.development ? require('./config/webpack.development') : require('./config/webpack.production')
};
}
webpack.config.js
![使用 webpack 搭建 vue 开发环境_第57张图片](http://img.e-com-net.com/image/info8/7fd43b6725534287973b1669de4b281d.jpg)
可以设置 resolve.alias 来配置项通过别名来将原导入路径映射成一个新的导入路径。比如说,设置 resolve.alias 后,导入路径 import Vue from 'vue/dist/vue.esm'; 可以简写为 import Vue from 'vue'; 。在命令行输入 yarn dev 没有报错,页面正常显示, 说明 resolve.alias 设置成功。
![使用 webpack 搭建 vue 开发环境_第58张图片](http://img.e-com-net.com/image/info8/e6fd06389eef4403990f89da9e12e51f.jpg)
如果想要设置样式,需要设置 css-loader 或 style-loader。css-loader 作用是解析 css,style-loader 作用是生成一个内容最终解析为 css 代码。
命令: yarn add -D css-loader
命令: yarn add -D style-loader
![使用 webpack 搭建 vue 开发环境_第59张图片](http://img.e-com-net.com/image/info8/774198758cca49b2b175de6fffe7c0bc.png)
![使用 webpack 搭建 vue 开发环境_第60张图片](http://img.e-com-net.com/image/info8/5472b877731142fc9cb368e64d30fe67.png)
在 webpack.config.js 写 loader 的规则,如果有 .css 结尾的文件则用 css-loader、style-loader 处理。
rules 配置模块的读取和解析规则,通常用来配置 Loader,配置一项 rules 时大致可通过条件匹配、应用规则、重置顺序这几种方式完成,其中条件匹配是通过 test、include、exclude 三个配置项来选中 Loader 要应用的规则,应用规则是对选中的文件通过 use 配置项来应用 Loader,可以只应用一个 Loader 或者按照从右往左的顺序应用一组 Loader。
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
const path = require('path');
module.exports = (env) => {
env = env || {};
return {
entry: "./src/main",
module:{
rules:[
{test:/\.vue$/, use:"vue-loader"},
//从右往左,先用 css-loader 读取 css,再用 style-loader 解析成css规则
{test:/\.css/, use:["style-loader", "css-loader"]}
],
},
resolve:{
extensions:['.js', '.json', '.vue'],
alias:{
vue: 'vue/dist/vue.esm'
}
},
...env.development ? require('./config/webpack.development') : require('./config/webpack.production')
};
}
webpack.config.js
![使用 webpack 搭建 vue 开发环境_第61张图片](http://img.e-com-net.com/image/info8/400e887ef2ad4679ba7e8bcdd71a0235.jpg)
现在可以写个样式看看能不能实现了。在 Xwh.vue 里写个 row 样式
![](http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif)
Xwh.vue
![使用 webpack 搭建 vue 开发环境_第62张图片](http://img.e-com-net.com/image/info8/ef291acb095a47c4b313079bece7a2dd.png)
执行命令 yarn dev ,没有报错,网页有样式正常显示。
![使用 webpack 搭建 vue 开发环境_第63张图片](http://img.e-com-net.com/image/info8/05d099062f9c48b6a4120fbdb3858147.png)
试试打包会不会有问题,先将之前生成的 build 目录删除,然后执行命令 yarn build。执行命令后发现没有问题,生成了 build 目录,打开 index.html 页面正常显示。
![使用 webpack 搭建 vue 开发环境_第64张图片](http://img.e-com-net.com/image/info8/68f5e88a39c84994a8048e0a62656174.jpg)
![使用 webpack 搭建 vue 开发环境_第65张图片](http://img.e-com-net.com/image/info8/9b209726f5cb42479d283dcb440d7604.png)
![使用 webpack 搭建 vue 开发环境_第66张图片](http://img.e-com-net.com/image/info8/4a45501f73ad4f8889d6b1c4ca6b59fe.jpg)
目前的文件目录结构如下:
![使用 webpack 搭建 vue 开发环境_第67张图片](http://img.e-com-net.com/image/info8/e89f2d04c7374805a99f6fdc14fd7f9e.png)
至此,简单实现了使用 webpack 搭建 vue 开发环境,基本没有使用 vue-cli。