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

————————————————
版权声明:本文为CSDN博主「凯里欧文」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_33274797/article/details/89786340

你可能感兴趣的:(webpack学习)