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