一、邂逅webpack

2021-04-24 本文已影响0人 AShuiCoder

学会看Webpack的官方文档

webpack的中文官方文档是https://webpack.docschina.org/
点击DOCUMENTATION来到文档页：

API：API，提供相关的接口，可以自定义编译的过程（比如自定义loader和Plugin可以参考该位置的API）
BLOG：博客，等同于上一个tab的BLOG，里面有一些博客文章；
CONCEPTS：概念，主要是介绍一些webpack的核心概念，比如入口、出口、Loaders、Plugins等等，但是这里并没有一些对它们解析的详细API；
CONFIGURATION：配置，webpack详细的配置选项，都可以在这里查询到，更多的时候是作为查询手册；
GUIDES：指南，更像是webpack提供给我们的教程，我们可以按照这个教程一步步去学习webpack的使用过程；
LOADERS：loaders，webpack的核心之一，常见的loader都可以在这里查询到用法，比如css-loader、babel-loader、lessloader等等；
PLUGINS：plugins，webpack的核心之一，常见的plugin都可以在这里查询到用法，比如BannerPlugin、
CleanWebpackPlugin、MiniCssExtractPlugin等等；
MIGRATE：迁移，可以通过这里的教程将webpack4迁移到webpack5等；

安装webpack

Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境。
webpack的安装目前分为两个：webpack、webpack-cli，那么它们是什么关系呢？

执行webpack命令，会执行node_modules下的.bin目录下的webpack；
webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于
自己的vue-service-cli的东西）

# 全局安装
npm install webpack webpack-cli –g 
# 局部安装
npm install webpack webpack-cli –D

webpack默认打包

当输入webpack命令的时候，会去寻找当前目录的./src/index.js为入口打包，如果找不到就会报错。
一般情况下，我们不会去使用全局的webpack，为什么呢？每台电脑的webpack版本不一样。

当我们在局部安装了webpack、webpack-cli以后，可以使用三种方式来使用：

直接在命令行输入./node_modules/.bin/webpack
直接运行npx webpack

修改package.json:

  "scripts": {
    "build": "webpack"
  },

然后运行npm run build

自定义webpack入口和出口

npx webpack --entry ./src/index.js --output-path ./build

或者

"scripts": {
   "build": "webpack --entry ./src/index.js --output-path ./build"
 },

webpack.config.js

在开发中我们通常会在项目根目录新建webpack.config.js文件来自定义webpack配置。webpack会在执行打包的时候根据该配置文件的配置来打包。
改写上面的自定义webpack入口和出口文件：

const path = require('path')
module.exports = {
  entry: './src/main.js', // 入口文件，可以使用相对路径
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './build') //出口文件必须要用绝对路径
  }
}

然后就可以把package.json文件指定的入口和出口文件删除啦：

{
  "scripts": {
    "build": "webpack"
  }
}

指定webpack配置文件

有时候我们不想要默认的webpack.config.js文件为配置文件，就需要在运行webpack命令的时候指定配置文件，如：

{
  "scripts": {
    "build": "webpack --config ./wb.config.js"
  }
}

webpack依赖图

webpack到底是如何对我们的项目进行打包的呢？

事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、
字体等）；
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；
image.png
结论：如果一个文件没有被其他文件所依赖，webpack是不会把该文件打包的