如何安装 & 配置webpack

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。

📢注意：本文仅适用于macOS，webpack@4.46.0

环境准备

安装nodejs

推荐去nodejs官网下载stable版本。npm作为nodejs包管理工具在安装nodejs的时候已经顺带装好了。

📢注意：保持nodejs和webpack的版本尽量的新，可以提升webpack打包速度🚀。

更新nodejs

如果是之前安装过但是想更新一下nodejs版本，可以使用n模块。

node -v首先查看当前node版本
npm info node可以查看node版本信息
npm install -g n安装n模块
sudo n stable安装最新的稳定版本
sudo n latest或者安装最新版本

更新npm

如果需要更新npm可以sudo npm install npm@latest -g

项目创建及初始化

mkdir webpack-demo首先创建一个文件夹
cd webpack-demo进入到文件夹下
npm init初始化项目，使项目符合nodejs的规范，也可以用npm init -y。这一步会在文件夹中生成package.json，这个文件描述了node项目的一些信息。

一些package.json的配置

"private": true,项目是私有的，不会被发布到npm线上仓库
可以去掉"main": "index.js",，如果项目只是自己来用，没有必要向外暴露一个index.js文件
scripts里面的内容也可以先去掉

webpack安装&卸载

全局安装(一般不推荐) npm install webpack webpack-cli -g webpack-cli作用：可以使我们在命令行中正确运行webpack这个命令
全局卸载 npm uninstall webpack webpack-cli -g
在项目中安装(🔥推荐) npm install webpack webpack-cli -D
在项目中安装查看webpack版本号 npx webpack -v
查看webpack历史版本 npm info webpack
安装指定版本webpack npm install webpack@4.46.0 webpack-cli -D

webpack配置

前文webpack究竟是什么我们提到过webpack是一个模块打包工具，会帮助我们把模块打包到一起。然而webpack并没有智能到我们给出一个文件它就知道如何打包，所以需要我们填写一个配置文件告诉webpack该如何打包。而之前执行npx webpack ./index.js进行打包使用的则是webpack给我们提供的默认配置文件。

配置过程

touch webpack.config.js创建webpack默认配置文件

配置webpack.config.js

// webpack.config.js
const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

默认模式为mode: 'production'，不配置的话打包会有warning。mode是production则打包出的文件会被压缩，如果mode为development，则不会被压缩。
entry的意思是我们这个项目要做打包，从哪一个文件开始打包。打包输出中Chunk Names配置的main就是entry中的main。不简写的情况下为
```
entry: {
  main: './index.js'
}
```
output的意思是打包后的文件放在哪里
- filename打包后的文件名
- path指打包后的文件放到哪一个文件夹下，是一个绝对路径。需要引入node中的path模块,然后调用这个模块的resolve方法
- __dirname指的是webpack.config.js所在的当前目录这个路径
- path: path.resolve(__dirname, 'bundle')resolve方法把__dirname与自定义的打包后文件夹bundle结合，就生成bundle这个文件夹的绝对路径。

上述即为webpack标准配置文件，要求webpack从index.js开始打包，打包生成的文件放到bundle文件夹下，生成的文件名叫bundle.js。运行npx webpack则会按照配置文件进行打包。 webpack默认配置文件名为webpack.config.js，如果要使用自定义名字比如webpackcon.js作为配置文件，可以用指令npx webpack --config webpackcon.js来实现。

配置package.json

npm scrtpts原理：当执行npm run bundle时，实际上运行的是package.json中的bundle命令。在scripts标签中使用webpack，会优先去当前项目的node_modules中查找是否安装了webpack（和直接使用webpack命令是去全局查找是否安装webpack不同）

"scripts": {
    "bundle": "webpack"
  },

当运行bundle这个命令，则会自动执行webpack命令。最后可以直接运行npm run bundle进行webpack打包。