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中的配置,同时在对应的知识点讲解中会附带项目的源码地址。