一、什么是Webpack

Webpack 是一个前端资源构建工具，静态模块打包器。它将所有资源文件（js/css/images/html）模块化处理并进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

二、五个核心概念

Entry

入口(Entry)指示Webpack以哪个文件为入口开始打包，分析构建内部依赖图

Output

输出（Output）指示Webpack打包后的资源输出到哪里，以及如何命名

Loader

让Webpack能够去处理那些非JavaScript文件（自身只能理解JavaScript）

Plugins

插件（Plugins）可以用于执行范围更广的任务，打包到压缩，一直到重新定义环境中的变量等

Mode

生产模式（production）：能让代码优化上线运行的环境
开发模式（development）：能让代码本地调试运行的环境

三、Webpack安装

安装两个Webpack文件

npm i webpack webpack-cli -g     //全局安装webpack和webpack-cli这俩个文件
npm i webpack webpack-cli -D    //安装webpack和webpack-cli这俩个文件的开发依赖项

四、开发环境和生产环境

4.1在src里面新建两个文件（.js后缀）(.json后缀)并写入代码(不知道怎么写可以参考我下面的)

//js文件
import data from './data.json';
console.log(data);

function add(x, y) {
    return x + y;
}
console.log(add(1, 2));

//json文件
{
    "name": "lgh",
    "age": 18
}

4.2 然后在终端执行下面指令

——先执行此命令

webpack ./src/index.js -o ./build/built.js --mode=development

结果会发现你的build里面自动生成了一个built.js/main.js文件，打开有内容就代表成功了

——再执行此命令

webpack ./src/index.js -o ./build/built.js --mode=production

同样打开main.js文件会发现里面的代码都被压缩了

4.3 然后你在build文件夹里面新建一个index.html文件；把js引入进去；

4.4 然后用浏览器打开

发现能返回结果就代表成功了

webpack 5.72.0 compiled with 1 error in 175 ms

这是因为webpack不支持不能处理css资源

第一节就初入以下webpack，了解它的基础知识
观看更多精彩文章点击这里
文章来源于bilibili熊老师的教学总结
bilibili视频教学