我将分五次把Webpack学习总结清楚
这一节讲解Webpack的一些基础概念
学习Webpack之前需要有一定的npm基础知识
一、什么是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这俩个文件的开发依赖项
四、开发环境和生产环境
学过gulp的都知道，先新建两个文件夹
src：里面存放源代码
build或者dist：里面存放打包好的压缩好的目的代码
想了解更多gulp知识点击这里
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 然后用浏览器打开
发现能返回结果就代表成功了
再写一些css样式，引入到js页面中，运行终端会发现报错
webpack 5.72.0 compiled with 1 error in 175 ms
这是因为webpack不支持不能处理css资源
第一节总结：
1.运行指令：
开发环境和生产环境就差最后一个字母
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
是这样理解的：webpack 源代码地址 -o 目的地址 --生产模式=xxx 生产环境比开发环境多一个压缩js的代码
2.不管是什么环境：
webpack会将src文件打包到build里的build.里面的./build/built.js 文件里
将es6模块化编译成浏览器可以识别的模块化
3：webpack处理文件：
webpack能处理js/json文件，不能处理css/image等其他资源
第一节就初入以下webpack，了解它的基础知识
观看更多精彩文章点击这里
文章来源于bilibili熊老师的教学总结
bilibili视频教学