webpack ---- 入门到入土

webpack----前端工程化与webpack的基本使用

webpack----前端工程化与webpack的基本使用

1. 前端工程化
2. webpack的基本使用
   2.1什么是webpack
   2.2通过项目体验webpack
   2.3webpack.config.js的作用
   2.4webpack的默认约定
   2.5自定义打包的入口和出口

webpack----webpack中的插件

webpack----webpack中的插件

3. webpack中的插件

3.1webpack插件的作用

3.2webpac-dev-server

3.3html-webpack-plugin

3.4devServer节点

webpack ---- webpack 中的 loader

webpack ---- webpack 中的 loader

4. webpack中的loader

4.1loader概述

4.2loader的调用过程

4.3打包处理css文件

4.4打包处理less文件

4.5打包处理样式表中与url路径相关的文件

4.6打包处理js文件中的高级语法

webpack ---- 打包发布

webpack ---- 打包发布

5. 打包发布

5.1为什么要打包发布

5.2配置webpack的打包发布

5.3把JavaScript文件统一生成到js目录中

5.4把图片文件统一生成到image目录中

5.5自动清理dist目录下的旧文件

webpack ---- Source Map

webpack ---- Source Map

6. Source Map

6.1 什么是Source Map

6.2 默认Source Map的问题

6.3 解决默认Source Map的问题

6.4 webpack生产环境下的Source Map

6.5 Source Map的最佳实践

webpack ---- 配置完成后的package.json与webpack.config.js

webpack ---- 使用@代替./ …/

webpack ---- 配置完成后的package.json与webpack.config.js & 使用@代替./ …/

7. 配置完成后的package.json与webpack.config.js

8. 使用@代替./ …/

8.1 配置