第一节：

1、安装webpack

4.0版本的需要安装 webpack 和 webpack-cli： npm i webpack webpack-cli -D

2、webpack默认配置打包：npx webpack

image.png
image.png

3、为什么webpack的配置文件名字都要叫 webpack.config.js?

默认名字有2个。
image.png

第二节：

1、配置文件修改名字后正常启动

image.png
image.png
image.png

第三节

*1、html-webpack-plugin出现报错 Cannot read property ‘tap’ of undefined

解决方案：版本不对导致的报错，具体为什么不太清楚。
我把5.9.0降为4.44.2(npm install webpack@4.44.2 -g),注意 一定把开发的也要降哦(npm install webpack@4.44.2 -D)

第四节

1、配置loader

image.png

第五节 css、js打包压缩 2021-03-16

1、配置样式-之前都是打包到html的header里，现在配置成单个的link标签的形式

mini-css-extract-plugin —— 抽离css插件
image.png

2、把css属性增加上浏览器前缀

autoprefixer —- 前缀插件，在使用它之前还需要使用一个loader解析： postcss-loader
image.png

新建一个postcss.config.js文件
image.png

3、压缩css和js

需要插件：
css压缩 - optimize-css-assets-webpack-plugin
js压缩 - uglifyjs-webpack-plugin
image.png

第六节 es6转化es5 2021-03-17

1、es6 转化 es5

插件：@babel/preset-env
image.png

2、高级语法转换成 es5

插件：
@babel/plugin-proposal-class-properties：转换类属性
@babel/plugin-proposal-decorators：转换类装饰器
image.png

第七节 处理js语法及校验 2021-04-06

1、包- @babel/plugin-transform-runtime 转成更高级的语法

@babel-runtime 也需要
实例上的方法不会去帮着解析
image.png

2、@bbbel/polyfill 解决实例上的方法不解析的插件

3、js语法校验 eslint

安装eslint elint-loader
image.png

第八节 全局变量引入

1、expose-loader

image.png

2、另外一种写法

image.png

3、不想每个页面都import这种方式引入，想直接就$就可以使用

image.png

4、CDN引入得第三方模块不需要打包

image.png

第九节 图片处理

1、file-loader 处理图片插件

image.png
image.png

2、行内样式需要特殊出力33

image.png