webpack快速入门2021

本篇教程适用于webpack初学者。这个也是我自己学习webpack时,整理的一些笔记,适用于新手。 本教程源码地址:https://github.com/pengfeiw/webpack-tutorial

一.什么是webpack

作为一个javascript前端开发者,肯定都知道webpack这个东西,也知道各种各样的module。webpack作为一个打包工具,就是将各种各样的模块捆绑(打包)在一起。支持的module有:

  • CommonJS
  • AMD
  • CSS import
  • Images url
  • Es module

webpack将所有模块捆绑在一起,使其运行。

二.重要概念

首先重点提一下几个相对比较重要也是最常用的东西。

入口文件(entry point)

webpack工作开始的地方,就是一个js文件。webpack通过这个文件内的import,收集其他模块文件,在通过其他模块文件内的import语句,收集其他依赖,最后将所有模块文件打包到一起,形成一个整体可运行的代码。 默认的入口文件是 src/index.js

输出文件(output)

output就是webpack通过build过程打包后形成的文件。默认的输出文件夹为根目录下的dist/文件夹。

加载器(loaders)

loaders是一些第三方扩展包,可以帮助webpack处理加载各种类型的文件。例如有处理css、image文件的loaders。如果没有loaders,webpack本身是不支持css文件的。

插件(plugins)

plugins也是第三方插件,它可以改变webpack的工作方式,例如有些插件可以设置webpack的环境变量。

模式(mode)

webpack有两种工作方式:development(开发模式)和production(生产模式)。 主要的区别就是production模式下,产生的捆绑包(文件)更小,去掉了在运行下无关的注释,空格等等。这样可以加快用户加载代码的速度。

三.实践

1.初始化项目

现在,我们通过实践一步步的了解webpack的工作过程。 首先新建一个目录,并通过npm init -y初始化项目。

mkdir webpack-tutorial
npm init -y

打开刚才创建的package.json,添加如下内容:

"scripts": {
    "start": "webpack"
}

并安装如下依赖:

yarn add webpack webpack-cli webpack-dev-server --dev

然后执行刚才添加的start命令:

yarn start

运行出错。当我们执行start命令后webpack给我们报错了:Module not found: Error: Can't reolve './src' 。 不用怕,还记得我们之前提到的入口文件吗,这个错误产生的原因就是没有找到入口文件。我们只要添加入口文件就可以了。创建src文件夹,并在src文件夹下添加index.js文件,输入以下内容:

console.log("webpack is so easy");

然后再次执行start命令,可以看到webpack正常运行,并生成了一个dist文件夹,dist文件就是webpack的输出文件,入口文件和输出文件的位置都是可以通过配置更改的。 因为我们的start命令,没有指定webpack的mode,所以webpack将以production模式运行。我们修改start命令,将模式改为development,修改package.json中的start命令:

"scripts": {
    "start": "webpack --mode development"
}

再次运行start命令,webpack将以development模式运行。

2.webpack配置文件,指定输入输出

前面提到,我们可以更改webpack的配置的。为了配置webpack,我们需要在根目录创建一个webpack.config.js文件。这是一个js文件,所以我们可以在里面写任意可运行的js代码。 首先更改入口文件和出口文件:

// webpack.config.js
const path = require("path");
module.exports = {
    // 将入口文件指定为main.js
    entry: {index: path.resolve(__dirname, "src", "main.js")},
    // 将输出文件目录改为build/
    output: {
        path: path.resolve(__dirname, "build")
    }
};

entry字段可以用来修改入口文件,上面的代码将webpack入口文件改为src/main.jsoutput字段用于修改输出文件位置,我们将输出文件目录改为build/。将src目录下的index.js文件重命名为main.js,运行start命令,可以看到webpack输出目录build。

3.添加html页面

为了将webpack打包后的文件,用script标签嵌入到html文档中,我们需要借助第三方plugins扩展:html-webpack-plugin 。上面介绍过plugin,plugin是改变webpack工作方式的第三方扩展html-webpack-plugin的作用就是改变webpack的工作方式,使webpack可以将打包后的js文件,添加到html页面的<script>标签中,这样打开html,就可以运行我们的js脚本。 首先,安装插件:

yarn add html-webpack-plugin --dev

然后,更改webpack.config.js文件:

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public", "index.html")
        })
    ]    
}

上面的代码指示webpack加载public/index.html,所以创建public目录,并添加index.html文件,内容如下:

<html>
    <head>
        <title>webpack tutorial</title>
    </head>
    <body>
        <span>webpack tutorial</span>
    </body>
</html>

运行yarn start,查看结果。此时我们的build目录下会出现一个index.html文件,文件内容如下:

<html>
    <head>
        <title>webpack tutorial</title>
        <script defer src="index.js"></script></head>
    <body>
        <span>webpack tutorial</span>
    </body>
</html>

与原html文件相比,增加了一个<script>标签,标签内容就是webpack打包后的js文件。

所以,我们可以知道html-webpack-plugin的功能:

  1. 加载html文件。
  2. 将webpack打包后的js文件,通过script标签添加到html文件中。

4.通过webpack启动本地服务

作为开发者,肯定会用到本地服务,webpack提供了development server,可以很方便的启动一个本地服务,方便开发者进行开发工作。 首先我们需要安装webpack-dev-server包。

yarn add webpack-dev-server --dev

细心的朋友已经注意到,我在安装这些ku的时候都会添加--dev字段,表示这些包只在开发模式中使用,方便开发工作的,在生产环境下并没有作用。 安装了这个包,是可以直接使用,首先我们更改package.json中的命令如下:

"scripts": {
    "buildDev": "webpack --mode development",
    "start": "webpack serve --mode development"
}

更改后,打包命令改为buildDev,启动本地服务器命令为start。执行yarn start。会在本地8080端口启动一个本地服务。打开http://localhost:8080,会显示index.html页面。

5.加载css

为了加载css,我们需要用到webpack loaderswebpack loaders是为了处理各种各样的模块和文件。为了加载css文件,我们需要安装至少如下两个loaders:

  • css-loader: 让我们可以使用import语句导入css文件。
  • style-loader: 将css样式插入到html dom中。

安装:

yarn add css-loader --dev
yarn add style-loader --dev

配置webpack.config.js,我们需要添加module字段,并增加rules, module表示该插件处理的是各种模块文件(ts、css、less等),rules对应不同的文件类型使用不同的loaders。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

为了测试loaders是否起作用,我们在src目录下增加style.css文件:

span {
    color: green;
}

更改main.js文件,导入style.css:

import "./style.css";
console.log("webpack is so easy.");

启动webpack server服务,打开localhost:8080,可以看到我们的字变成了绿色,表示成功加载了css文件。

注意:loaders的顺序很重要,webpack加载loaders的顺序是从右到左,所以下面的loaders配置是无效的:

use: ["css-loader", "style-loader"]

因为style-loader负责将样式插入到html中,程序总是先执行js代码,所以首先执行的是css的import,所以顺序错误了。

同样,我们可以增加SASS文件,只需要增加sass-loader,这个留着大家后面自己尝试。

6.加载es modules

webpack最重要的功能就是加载es modules。到这里大家应该知道加载es modules,我们应该也需要增加对应的loaders,但是其实webpack已经自带了加载es modules的功能。我们可以直接使用。新建src/component.js文件,写入以下代码:

export function print() {
    console.log("this is component.js");
}

然后更改src/main.js:

import "./style.css";
import {print} from "./component";
console.log("webpack is so easy.");
print();

启动服务,打开浏览器控制台,有如下输出,表示webpack es modules正常加载。

7.production模式

前面说过webpack有两种模式:development和production模式。我们可以指定webpack打包的方式,修改package.json的scripts字段:

"scripts": {
    "buildDev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
}

执行build命令,打包后的文件会删除冗余的注释和空格用于部署到生产环境。

这个教程,内容并不多,大概一个小时就可以学完,目的是为了介绍webpack的一些基本概念。webpack内容比较多,遇到问题可以查看官方文档和百度,在实践中慢慢熟悉和学习。

(完)

留言(0
发表评论
邮箱地址不会被公开。*表示必填项。
评论(支持部分html标签)*
姓名*
站点