了解webpack

了解

webpack（对于webpack最好是先了解一下，因为现在的脚手架创建，初始化项目很方便了）

概述：前端项目打包工具。webpack帮我们优化项目性能，从而让我们项目运行效率更高，提高了项目后期的课维护性，处理js兼容问题。

webpack的基本使用：（了解）

下面用一个案例解释为什么用webpack。

案例：用jqure实现表格的隔行变色。

 

 

 可以发现输出行报错了，因为import $ from 'jquery' 属于ES6模块化语法，浏览器不支持，所以要用webpack进行打包转化。

 

 

 通过module.exports向外暴露一个配置对象，里面指定一个mode（编译模式），他的值有两个：development （开发阶段）和 production（项目上线阶段）

 

 打包完成后会自动多出一个文件，里面的main.js就是index.js转化后的文件。然后在html中引入这个main.js文件就好了。

总结：

1 发现网页不支持高级语法，要进行转换

2 安装webpack 和 webpack-cli

3 创建webpack的配置文件（webpack.config.js），并初始化：通过module.exports向外暴露一个配置对象，里面指定一个mode（编译模式），他的值有两个：development （开发阶段）和 production（项目上线阶段） 

4 在package.json的scripts节点下新增"dev": "webpack"

5 运行npm run dev 进行打包

 

为什么webpack可以根据src中的index.js生成main.js呢？

因为这是webpack的默认约定：

 

 

如果要修改webpack的打包入口与出口可以在webpack.config.js中新增配置信息。

1 先导入用于操作路径的path(   require ('path')  )

2 通过entry 指定入口文件

3 通过 output指定出口文件

 

 

配置自动打包功能（了解）。

为什么需要配置自动打包功能呢？

因为如果想改index.js文件中的信息，就要重新打包。因为html中引入的是打包好的js文件，不是index.js文件。这样每次修改都要重新打包就很麻烦。

 

 webpack打包相关的参数:

 

 

webpack加载器:loader

因为webpack只能打包.js的模块，其他非.js模块只能用过加载器loader打包。

所以loader的作用：协助webpack打包文件

loader的使用：（了解）

如下，在写好了css后并引入，再进行打包会报错，因为没有配置loader。

 

 怎么配置呢？

配置less-loader与scss-loader： https://www.bilibili.com/video/BV1vE411871g?p=130

postcss-loader : 自动添加css兼容前缀（有些css在不同浏览器显示不同，要加前缀）

url-loader , file-loader： 处理图片路径。

对于js高级语法的处理： https://www.bilibili.com/video/BV1vE411871g?p=134