webpack

目录

1.概念: 静态模块打包工具

2.本质: node环境, 第三方模块包 (nodejs代码)

3.使用

4.配置

---

1.概念: 静态模块打包工具

2.本质: node环境, 第三方模块包 (nodejs代码)

3.使用

1. 前提: node+npm/yarn 软件环境
2. 初始化包环境 -- yarn init -- 得到package.json文件 --- 记录你下的包 / 配置自定义命令
3. 下载webpack模块 --- yarn add webpack webpack-cli
4. 配置自定义命令 --- scripts: { "build": "webpack"}
5. 编写逻辑代码 --- 必须在src/入口js文件内, 直接/间接 引入关系才会被打包
6. 执行yarn build -- 打包后的代码放到dist/

4.配置

1. 配置文件默认: webpack.config.js

2. entry - 入口

3. output - 出口

4. plugins - 插件 -- html-webpack-plugin  ----- 生成html文件

5. module - 加载器

            5.1  css-loader 和 style-loader   ---  识别css文件和代码

            5.2  less-loader 和 less 和上面的    ----  识别less文件和代码-转成css \

            5.3  内置资源模块 assets

注意:   yarn可用npm替代

具体操作使用,请点开下方链接

webpack 中文文档 | webpack 中文网