1、webpack
webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具。
2、webpack安装
webpack基于node.js所有先安装nodejs
https://blog.csdn.net/liu_shi_jun/article/details/80957335
全局安装webpack
npm i webpack -g
查看webpack版本
3、Demo
（1）创建一个项目结构
（2）执行npm init -y 初始化项目，使用npm管理项目中的依赖包
(3) 安装jquery
npm i jquery -S
(4)在main.js入口文件引入jquery
（5）编写webpack.config.js配置文件
（6）命令生产打包文件
4、webpack-dev-server
使用webpack-dev-server这个工具，来实现自动打包编译功能。
1、运行npm i webpack-dev-server -D将工具安装到项目的本地开发依赖
（2）在package.json中配置dev启动
由于是本地安装的webpack-dev-server（只能本地项目安装），所有必须在package.json中配置dev启动。
（3）运行npm run dev
5、webpack-dev-server常用指令
方式1：直接写到webpack-dev-server 后面
方式2：写到webpack.config.js中
6、html-webpack-plugin插件使用
作用：
（1）在内存中生成一个html页面。
（2）将dist中js自动加载到内存中的html页面中。
使用：
7、loader配置处理css
webpack默认只能打包js类型的文件，无法处理其他的非js类型的文件，如果要处理非js类型的文件，我们需要手动安装一些合适的第三方loader加载器。
处理css的loader加载器需要安装：npm install style-loader css-loader -D
在webpack.config.js中新增加一个节点，叫做module，它是一个对象。在这个对象中有个rules属性，这个rules属性是个数组；这个数组中存放了所有的第三方文件的配置规则。
8、使用url-loader处理图片地址
使用：npm install url-loader file-loader
配置webpack.config.js
9、使用url-loader处理文字样式
10、babel配置
支持es6高级语法，需要安装bable-loader相关的包
第一步：
cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
cnpm install babel-preset-env babel-preset-stage-0 -D
第二步：
打开webpack.config.js，在module节点下的rules数据组中，添加一个新的匹配规则
{test:/.js$/,use:'babel-loader',exclude:/node_modules/}
第三步：
在项目的根目录中，新建一个叫做.babelrc 的Babel配置文件，这个配置文件属于JSON格式。
11、webpack中使用vue
（1）安装vue的包 cnpm install vue -S
(2)在main.js中引入vue模板 import Vue from 'vue'
（3）在webpack中，推荐使用.vue文件作为模板组件，所有，要安装能解析这种文件的loader
cnpm i vue-loader vue-template-compiler -D
12、export default
ES6中，export default 和default 向外暴露成员。
注意：
export default 向外暴露的成员，可以使用任意变量来接收。
在一个模块中，export default 只允许向外暴露1次。
在一个模块中，可以同时使用export default和export向外暴露成员。
defalut
注意：
使用default向外暴露的成员，只能使用{ }的形式来接收，这种形式叫做按需导出
export可以向外暴露多个成员，同时，如果某些成员我们在import的时候，不需要则可以不在 { }中定义。
使用export导出的成员，必须严格按照导出时候的名称，在{ }中接收
13、webpack中使用vue-router
（1）下载包
cnpm install vue-router -S
（2）main.js配置
14、组件中style标签lang属性和scoped属性
scoped：表示样式只作用在当前组件上
lang：可以使用scss或者less语法写样式
————————————————
版权声明：本文为CSDN博主「凯里欧文」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33274797/article/details/89786340