Vue_Webpack

前端工程化

1. 模块化(js复用)
2. 组件化(UI复用,layui)
3. 规范化(各种规范)
4. 自动化(自动构建、自动部署、自动化测试)

前端工程化指的是:在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

Vue项目和React项目，都是基于工程化的方式进行开发的

---

webpack

功能：代码压缩混淆、处理js的兼容性、性能优化等

文件结构：根目录下src文件夹放index.html,index.js

安装webpack

npm install webpack webpack-cli

①在项目根目录中，创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置

module.exports = {
	mode: "development" //mode用来指定构建模式。可选值有development 和production
}

production模式下代码会进行压缩，打包时间较长

开发时用development，追求打包速度，上线时用production，追求体积小

②在package.json的scripts节点下，新增dev脚本如下:

"scripts": {
	"dev": "webpack" // script节点下的脚本，可以通过npm run执行。例如npm run dev
}

运行

npm run dev

先读取webpack.config.js中的配置信息，然后根据配置信息执行webpack

可将index.html中一些因为兼容问题产生的报错修复，修复 结果保存在dist/main.js下（并没有进行压缩）

默认约定

1. 默认打包入口文件为src->index.js
2. 默认输出文件路径为dist->main.js

可以在webpack.config.js中修改默认值（案例8：38），entry指定入口，output指定出口

案例参照

Vue2.0-05.webpack基础 - 安装和配置webpack_哔哩哔哩_bilibili

---

webpack插件

webpack-dev-server

npm intall webpack-dev-server -D

将package.json->script中的dev进行修改

"dev" : "webpack serve"

运行

npm run dev

当修改index.js时，会自动进行打包，并保存在根目录的main.js中（其实是保存在内存中，便于频繁读写），所以js引用应改为

<script src = "/main.js"></script>

在http://localhost:8080/下的src中查看实时渲染结果

Ctrl+C 关闭实时监听

html-webpack-plugin

如果希望访问8080后就看见渲染结果，可以使用html-webpack-plugin插件，将src中的index.html复制到根目录中（依然是在内存中）

npm install html-webpack-plugin

在webpack.config.js中

// 1.导入HTML 插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2.创建HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定原文件的存放路径
filename: './index.html', //指定生成的文件的存放路径
})
module.exports = {
	mode:'development',
	plugins: [htmlPlugin], //通过plugins 节点，使htmlPlugin 插件生效
}

。。。。nb，Vue-cli中可以自动配置，白学

devServer节点

webpack.config.js配置文件中

devServer:{
	open:true,//打包完成后自动打开浏览器
	port:80,//修改端口
}

---

webpack中的loader

webpack默认只能处理.js文件，其他后缀文件需要调用loader加载器才能正常打包，否则会报错

截至视频P15，待续