Webpack深入与实战 慕课网 免费 讲师qbaty 学习笔记

注意:视频中的Webpack是3.X 目前2021年,Webpack安装后默认是5.X    中文官网

如果跟着视频里面一步一步操作,一上来就一个大坑.翻阅了教程下面的留言区,重要找到了答题,特此说明  参考

思想是不变的,但细节变化得蛮大的,

第1章 webpack 3.X 基本介绍
主要介绍webpack 的基本信息，如何安装 webpack，通过命令行如何使用webpack
1-1 webpack 基本介绍 (07:03)
1-2 Webpack 安装和命令行 (19:11)

Webpack 5.X 基本命令行打包命令   webpack --mode development  前置步骤请参考上面的参考链接

Webpack 5.X 运行方式:
1.命令行方式:最直接的方式,如 webpack --mode development 
2.package.json scripts 脚本方式:
即在nodeJS项目的package.json文件的scripts增加配置

"dev":"webpack --mode development",
"build":"webpack --mode production"

以后在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。

为了可以正常运行上面的脚本,需要安装 npm install webpack-cli

"devDependencies": {
  "webpack": "^5.21.2"
},
"dependencies": {
  "webpack-cli": "^4.5.0"
}

换个角度,相当理解了package.json scripts属性的作用

第2章 webpack 基本配置
本章节主要介绍从一个项目着手开发，一开始需要配置的最基本的参数和属性有哪些。通过webpack 如何灵活使用这些参数，来实现更复杂的需求。
2-1 建立项目的 webpack 配置文件 (08:47)
2-2 webpack配置的 entry 和 output new (11:28)
8:44 理解命令 npm run webpack

第3章 生成项目中的html页面文件
本章节主要介绍使用 HtmlWebpackPlugin 插件来帮助我们生成项目中的页面文件，通过插件的参数，配置来控制页面引入的资源，参数等。
3-1 自动化生成项目中的html页面(上) (11:38)
webpackage中插件的概念 使用npm 安装 html-webpackplugin --save-dev

涉及:COMMON JS中模块引用语法 require
2:47 var htmlWebpackPlugin = require('html-webpack-plugin') 官网上有说明
引出了webpackplugin对应属性 plugins

plugins: [
    new htmlWebpackPlugin({ //对应上面的var声明
        //参数对象
    })
]    

3-2 自动化生成项目中的html页面(中) (15:51)

3-3 自动化生成项目中的html页面(下) (27:00)

第4章 处理项目中的资源文件
本章节主要介绍，前端开发中主要静态文件的处理， 介绍了loader 的使用和loader 的概念，其中分别介绍了如何配置项目中支持ES6语法， less /sass 等css 预处理语言的支持。后几节介绍了图片和模板文件的处理。
4-1 什么是 Loader 以及 Loader 的特性 (12:08)
4-2 使用 babel-loader 转换 ES6 代码（上） (16:42)
4-3 使用babel-loader 转换 ES6 代码 （下） (05:00)
4-4 处理项目中的 css (21:35)
4-5 使用 less 和 sass (09:05)
4-6 处理模板文件 (13:47)
4-7 处理图片以及其他文件 (21:43)