Webpack入门

之前的章节都是对Webpack的认识，对基础概念到整体的运作流程有了一个大致的了解。从本章节开始，我们将从代码层面去学习和掌握Webpack。

安装Webpack

在安装Webpack之前，需确保安装了Node.js，Webpack的运行是基于Node环境的，同时Node中集成了Npm包管理器，我们可以使用Npm来下载各种优秀的工具，库和框架。在安装好Node之后，你需要使用npm init -y来简单初始化你的项目，会生成一个简单配置的package.json文件，来保存项目的相关的配置信息和所依赖的模块信息。

安装Webpack到项目

可以根据自己的需要选择以下任意命令安装Webpack到项目：

#安装最新的稳定版本
npm i -D webpack
#安装指定版本
npm i -D webpack@
#安装最新的体验版本（慎用此版本进行项目的开发）
npm i -D webpack@beta

其中npm i -D是npm install --save-dev的缩写，是指安装模块的名称和版本信息保存在项目的package.json的devDependencies,表示只是开发项目时候所需要的依赖。如果你想安装项目生产时所需要的依赖可以使用如下命令：

npm i packageName 或者 npm install packageName

生产所需要的依赖模块信息记录在package.json的dependencies下。

安装Webpack到全局

使用npm i -g webpack可以把Webpack安装到全局，后需开发项目就不需要在安装Webpack了。实践经验不推荐把Webpack安装到全局，原因是可以防止不同的项目因为依赖不同版本的Webpack而导致冲突。

安装Webpack-cli

如果你使用Webpack4+版本，你还需要安装Webpack-cli。安装命令：npm i -D webpack-cli。至此Webpack的环境已经搭建完成。

Webpack的默认配置

Webpack有着默认的构建配置，做到了开箱即用。为了更加清楚的了解Webpack的默认配置，下面给出一份简单的Webpack配置代码，其中的配置信息和默认配置有着同样的功效。新建webpack.config.js文件，其内容如下：

// path为node.js中内置的模块，专门用于处理资源文件的路径问题
const path = require("path");
module.exports = {
    // mode代表webpack构建的模式，默认为production
    mode: 'development',
    // entry规定了构建的入口模块
    entry: './src/index.js',
    // output规定了构建结果的名称和输出路径
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'dist')
    }
}

该配置规定了Webpack执行构建的时候，在哪儿去寻找入口模块，采用什么模式构建，最后怎么输出构建结果。现在可以不必过于纠结每一个配置的具体作用是什么，有一个最基本的认识即可。

上面的配置基本和Webpack的默认配置达到了一样的效果。当你没有src文件夹和index.js文件的时候，Webpack会构建失败，并给出相应的提示。（src文件夹中的index.js文件是Webpack的默认入口位置，实际开发中可以随意指定入口位置）

Webpack执行构建的几种方式

前面介绍了怎么安装和配置最简单的Webpack，现在就来讲一讲怎样让Webpack运行起来。下面的几种方式都可以触发Webpack的执行器，执行构建。

命令行输入node_modules/.bin/webpack

在项目根目录打开终端，输入node_modules/.bin/webpack便可以运行Webpack的可执行文件。

Npm script中定义运行命令

Npm script是Npm内置的一个功能，允许在package.json文件Scripts里面中定义任务，Scripts是一个对象，每一个属性对应一段Shell脚本，其底层原理是通过调用Shell去运行脚本命令。定义Script命令格式如下：

{
    "name": "3.webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12"
    }
}

然后在终端运行 npm run build 也可以运行Webpack中的可执行文件。

使用Npx

如果你安装了全局的Webpack，那么你可以在终端直接输入webpack命令也可以执行构建，但是我们并不推崇全局安装Webpack。Webpack安装在项目中直接在终端输入webpack会提示找不到这个命令，这个时候你可以使用npx webpack命令执行Webpack的可执行文件。

npm从5.2版开始，增加了Npx命令，Npx想要解决的主要问题，就是调用项目内部安装的模块。如果项目内部没有对应的模块，那么就会下载该模块，安装到项目内部。

在这里，我们推荐使用Npm script方式来运行Webpack，不仅🈷因为这种方式简单，而且这种方式还可以在构建的时候传入参数，改变Webpack的构建方式和结果。这种方式在分环境构建的时候很有效。

Webpack中的配置方式

Webpack中有多种配置方式，下面我们逐一介绍下Webpack中的多种配置方式。

默认配置方式
实际开发中是不会使用Webpack的默认配置的，该配置的功能最弱，例如不能转换Css代码。要想使用Webpack的默认配置方式，需要满足Webpack可以执行默认构建的条件，即在项目的src目录下创建index.js。
使用配置文件
Webpack中默认使用的配置文件是在项目根目录下的Webpack.config.js文件，在这里你可以进行实际开发项目的构建配置。
通过命令行接口进行配置
可以在命令行中参入相应的构建参数，也可以对Webpack的构建进行配置。例如 webpack src/index.js dist/bundle.js 命令表示指定构建的入口模块是src目录下的index.js，输出结果保存到dist目录下的bundle.js文件中。更多命令行参数配置方式：https://webpack.js.org/api/cli/#commands。

实际开发中，推荐配置文件和命令行接口配置的组合使用，这样会使你的配置更加灵活，更加强大。

学到这里，你应该了解并掌握了如何使用Webpack进行一些简单的配置和怎样执行一个项目的构建，从后面的章节开始，将详细的介绍Webpack中的配置，同时在对应的知识点讲解中会附带项目的源码地址。