webpack

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语法写样式

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值