脚手架是什么
一套项目的主体结构,包括开发过程中用到的工具、环境配置、模块划分等
主体结构全部搭建好了,我们可以利用这个主体结构直接去开发,完成我们的需求,而不用花时间再去配置项目需要用到的东西
vue-cli是什么
一个下载器(启动器),根据不同的配置,下载git上的一个vue目录,帮助我们快速的构建一个项目
我们所看到运行、打包等功能其实是webpack在起作用,真正重要的是loader
webpack文件本身是不认识vue文件的,所以需要各种各样的loader将不同的文件转化为webpack可识别的js文件,各种plugin是为了扩展功能
vue-cli3.x学习了rollup(零配置思路),所以在项目初始化之后,没有了之前的那些配置文件。这是因为vue-cli3帮我们解决了绝大部分的webpack配置
注意
不建议全局安装webpack,因为不同项目内部依赖的webpack版本可能不同,全局安装之后可能存在冲突
使用webpack搭建脚手架,构建一个vue开发环境
git地址:https://github.com/zhangstar1331/my_vue_cli
目录结构展示
创建流程
1、创建文件夹my_vue_cli
2、生成package.json工程管理文件
npm init -y
3、项目中引入vue文件
npm install vue
4、项目中引入webpack
npm install webpack webpack-cli
webpack-cli是一个简易客户端,用来与webpack协议连接
5、项目中引入所需的loader,将webpack不能识别的文件类型转为能够识别的js文件
npm install vue-html-loader //解析vue2.0组件里的template
npm install vue-loader //解析vue组件
npm install vue-template-compiler //编译器,把vue里的东西分别编译为html,js,css
npm install css-loader //处理 import / require() @import / url 引入的内容,解析css
npm install style-loader//通过一个JS脚本创建一个style标签,里面包含一些样式。不能够单独使用
6、创建web服务
每次更新都需要重新打包一次,很麻烦
我们可以借助webpack-dev-server,用于开发调试,提供web服务、热更新、接口代理等等
打开web服务
npx webpack-dev-server
webpack-dev-server打包后的js文件是在内存里维护的,所以只需要将index.html中引入的打包js路径改为根目录即可实现热更新。
注意:
这可能存在一个问题,内存里维护的文件,服务器重启,内存里的数据就没了。所以生产无法直接使用,生产还是需要打包一个js文件放在服务器上,而开发的时候可以这样使用。这也就是webpack中开发和生产两种模式存在的意义。
7、下载html-webpack-plugin用于打包html文件
因为开发用的bundle.js是内存下面的,引入直接用根目录。生产引入需要将目录改为build下。每次更改比较麻烦,所以可以将index.html也直接打包,自动引入js文件。
npm install html-webpack-plugin
8、配置不同文件区分开发环境和生产环境
创建config目录,里面新增开发和生产的配置文件
|--config
|--webpack.development.js
|--webpack.production.js
webpack.development.js
const htmlWebpackPlugin = require('html-webpack-plugin');
const vueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
//开发模式,在内存里维护,不需要压缩和生成打包文件
mode:"development",
output:{
filename:"bundle.js"
},
plugins:[
new htmlWebpackPlugin({
//模版文件
template:"public/index.html",
//文件名
filename:"index.html"
}),
new vueLoaderPlugin()
]
}
webpack.production.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const vueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
//三种模式:none(不压缩) production(压缩,生产环境) development(不压缩,开发环境)
mode:'production',
//打包输出路径
output:{
path:path.resolve(__dirname,'../build'),
filename:'bundle.min.js'
},
plugins:[
new htmlWebpackPlugin({
//模版文件
template:"public/index.html",
//文件名
filename:"index.html"
}),
new vueLoaderPlugin()
]
}
webpack.config.js中,可以根据参数传入,判断命令行中传入的是什么命令,进而判断是开发命令还是生产命令,执行不同的语句
webpack.config.js
module.exports = (env) => {//env可以接收到命令行中传入的参数,进而去识别是开发或生产语句
env = env || {};
return {
entry:'./src/main.js',
module:{
rules:[
//处理vue结尾的文件
{test:/\.vue$/,use:"vue-loader"},
//这里使用的是compose组合函数,读取为从右往左。如果是pipe函数则是从左往右
//即先执行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'))
}
}
package.json的scripts中创建命令
"scripts": {
"dev":"webpack-dev-server --env.development --open",//开发
"build":"webpack --env.production"//生产
}
命令行中直接执行
npm run dev
npm run build
webpack本地安装,可以通过npx webpack去执行webpack
9、效果展示