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