「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。
Webpack是什么，解决了什么问题？
Webpack是目前最热门的前端工程化模块打包工具，它设计的初衷是解决前端模块化问题，让我们实现如何高效的地管理和维护项目中的每一个资源，目前最新版本Webpack5，功能也变得越来越强大，但它依旧不忘初心，始终没有改变它是一个前端打包工具的初衷，它所做的事情就是：分析项目结构，找到并加载所依赖的资源模块，把一些不被浏览器支持的特性（如Sass，TypeScript，ES6+、JSX等）转换和打包成浏览器兼容的格式来使用。
这也是Webpack最强大之处，接下来我们将从零开始学习这个工作中必备技能 —— Webpack!
Webpack中文官网：webpack.docschina.org/
安装Webpack
如果你使用 webpack 4+ 版本，除了webpack，你还需要安装 webpack-cli，目的是在命令行中使用webpack
npm install webpack webpack-cli
使用Webpack
1、零配置运行Webpack
安装完成后就可以直接使用webpack了，webpack4+后的版本支持零配置打包，不需要进行其它额外操作，在命令行输入以下命令即可
npx webpack
必须保证前你的npm版本在5.2+，npm v5.2.0引入一个npm包执行器npx，执行npx命令时它会调用
node_modules中.bin目录下的相应命令
以上命令webpack会默认把src/index.js文件作为入口开始编译，并打包到main.js文件，最后输出到当前目录下的dist文件夹，这都是webpack零配置下的默认行为。
如果在index.js文件中引入其它js模块，webpack会继续加载这些模块，并将这些零散的js文件打包到一个main.js文件中，如下图：
很多时候这种默认的配置并不能满足我们的开发需求，比如：
- 入口文件不是
index.js而是其它文件 - 修改输出目录
- 输出后的文件也不想叫
main.js想换个其它文件名 - ...
对于这些需求，我们都可以使用命令行参数来实现，从而覆盖这些默认设置
2、webpack-cli命令行参数
webpack-cli的参数有很多，可通过npx webpack --help查看
-
如通过
--entry设置入口位置，打包时webpack就会从该位置开始查找和分析模块依赖npx webpack --entry ./src/main.js -
如通过
--output-path设置打包后输出文件位置npx webpack --entry ./src/main.js --output-path ./public/ -
如通过
--mode指定输出环境代码，有production、development、none（请自行查阅每种环境下代码的含义与作用）npx webpack --entry ./src/main.js --output-path ./public/ --mode production
相信你也看到了，命令行参数太过于繁琐，每次都要输入，且不能保存，实际开发中很少通过这样的方式进行配置，那有没有更好的方式来实现自定义配置呢？答案就是webpack配置文件
3、webpack配置文件
要实现个性化配置，只需要在项目根目录下创建webpack.config.js文件，该文件在NodeJS环境下被执行，是一个遵循commonJS规范的文件，接下来通过配置文件来实现上面的需求:
- 通过
entry配置设置入口位置，指示webpack从哪里开始分析项目 - 通过
output配置打包后文件输出位置，指示webpack如何去输出、以及在哪里输出内容，如：output.path设置输出打包后文件保存位置，该属性必须为绝对路径（一般用path.join()方法设置绝对路径）- 如果还想修改打包后的js文件名，通过
output.filename设置
- 通过
mode属性设置输出特定环境代码
module.exports = {
entry:'./src/main.js',
output:{
path:path.join(__dirname,'./public'),
filename:'bundle.js'
},
mode:'production'
}
然后在命令行运行以下命令进行打包
npx webpack
webpack会自动查找当前目录下的webpack.config.js文件中的配置并打包，代码打包后，会输出到
./public/bundle.js。
你也可以通过output.filename的变量名实现特殊的需求，如（[name]、[hash]等），其中name为入口文件名称，hash为哈希字符（默认生成10位哈希字符，可能过[hash:5]指定生成哈希字符长度），一般用于解决缓存问题
module.exports = {
entry:'./src/main.js',
output:{
path:path.join(__dirname,'./public'),
filename:'js/bundle-[name]-[hash:5].js'
},
mode:'production'
}
以上配置运行后，会打包成bundle.main.3eef7.js文件，并输出到public/js文件夹
4、自定义Webpack配置文件
当然，webpack的配置文件是可以自定义的，可以是其它名字或是其它目录（如：./config/webpack.js），运行命令时通过 --config 指定配置文件位置即可，如：
npx webpack --config ./config/webpack.js
后语
到目前为止，我们的代码只是使用Webpack加载与打包js模块，对于其它类型的模块（如css、typescript、图片等），就得使用asset module资源模块 或 loader加载器实现加载与编译了，该内容我会在下一篇文章《webpack5教程二：资源模块与加载器》中详细说明，敬请继续关注。
