前言
webpack是目前比较主流的打包工具，它可以将多种静态资源 （js、css、less ）转换成一个静态文件。不过它本身只支持处理js模块，如果还需要处理其他模块就得借助加载器，接下来就来介绍如何使用webpack。
安装webpack
首先创建一个目录，初始化npm，然后安装webpack和webpack-cli（用于处理命令行参数）
//初始化npm
npm init -y
//安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
随后在你的目录应该出现以下这些文件（为了方便看，我直接写中文了）
你的根目录
|- package.json
|- package-lock.json
随后创建一个src目录，目录下放的是程序员的源代码，然后上面的结构就变成了
你的根目录
|- package.json
|- package-lock.json
|- index.html
|- /src
|- index.js
可以打开packag.json看看，需要注意name可别起个和第三方包名字一样的了，不然到时候下载包下载不下来了，特别不要写成webpack了，main就是入口文件，其他就不要去动它了。
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "./src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
到这里就算是安装完成了。
webpack的五大核心概念
其实webpack不需要任何配置就可以对js文件做出处理，比如我们在使用es6模块化时，不加type=‘module’，控制台就要报错，接下来我们演示一下如何用webpack让控制台可以认识es6模块。
我们在一个count.js文件中随便写点什么，随后导出给index.js文件使用
//count.js
export default function (...res) {
return res.reduce((p, c) => p + c, 0)
}
//index.js
import count from './js/count'
console.log(count(1, 2, 3, 4, 5))
记得要把index.js文件在html文件中引入，当然直接引入时绝对会报错的，那么这时候webpack就登场了，我们打开控制台，输入如下命令
npx webpack ./src/index.js --mode=development
npx webapck会从.bin目录中去找webpack的可执行文件，./src/index.js就是告诉webpack要打包的入口文件，随后就是告诉webpack现在是开发模式，然后webpack就会默认把打包好的文件输出到dist目录下，这时候在html文件中引入dist目录下的js文件就不会报错了
那如果我们想要打包其他的资源文件的话，webpack是不支持的，需要其他加载器去支持，所以我们需要知道webpack的五大核心概念：
-
entry(入口)
告诉webapck从哪个文件开始打包
-
output(输出)
告诉webpack打包好的文件输出到哪里，怎么命名
-
loader(加载器)
webpack只支持js，json格式文件的解析，解析其他资源需要loader的帮助
-
plugins(插件)
扩展webpack的功能
-
mode(模式)
开发模式还是生产模式
那么如果想要打包css资源该怎么办呢，首先肯定需要配置webapck，在根目录下创建一个文件叫webpack.config.js，随后打开官网，找到对应的loader，将它的配置复制粘贴过来即可，官网只有对rules的配置，其他配置要根据自己的需求写。
const path = require('path');
module.exports = {
entry: './src/main.js',//入口文件地址
output: {
path: path.resolve(__dirname, "dist"), //输出文件地址，注意需要写绝对路径，因为官网就是这么说的
filename: 'main.js',//输出的文件名
},
module: {
//官方文档复制过来的rules
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
]
},
plugins: [
],
mode: 'development'
}
配置好以后不要急着运行，因为会报错，你需要安装这两个加载器，css-loader和style-loader，随后记得在index.js中引入一下css文件，不然就没有意义了，然后在控制台输入npx webpack 这里就不需要像上面一样写那么长了，因为我们有配置文件了，它就会根据配置文件去执行了。
//index.js文件
import count from './js/count'
import './css/index.css'
console.log(count(1, 2, 3, 4, 5))
打开开发者工具，可以看见有创建一个style标签
说明打包成功了，那么对于其他的资源文件，比如sass，less等等，也是一样的，官网有配置，直接粘贴过来，建议查阅英文文档，因为有时候中文文档可能和英文文档不是同步更新的。
