JS第二十八次笔记(最后)

33 阅读1分钟

1. Webpack

1.1 Webpack定义

image.png

image.png

1.2 Webpack的使用

image.png

image.png

image.png

image.png

image.png

image.png

1.3 更改webpack的入口与出口

概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 image.png

image.png

1.3.1 修改webpack入口与出口

image.png image.png

1.3.2 文件夹解释(重点理解)

image.png

1.4 案例——注册用户(长度判断)

image.png

1.5 自动生成html文件

HtmlWebpackPlugin

image.png

image.png 使用# HtmlWebpackPlugin,自动将html文件生成 image.png

1.6 打包CSS模块

注意:Webpack默认只识别js和json文件内容,所以需要使用加载器让webpack认识更多的文件

image.png

渲染成功:

image.png

1.7 打包less模块

image.png

image.png

1.8 打包图片

1.9 babel编辑器

image.png