掘金 阅读 ( ) • 2024-05-08 16:44
小白也能轻松看懂的webpack入门教程
webpack 小白 教程

前言

你是否曾经听说过Webpack，但对它感到陌生，甚至觉得它很难入门？别担心，本篇教程将带你轻松了解Webpack的基础知识，让你能够快速上手使用它来构建你的项目。

正文

什么是webpack

webpack 是一个现代的 JavaScript 应用程序静态模块打包工具。它可以分析你的项目结构，找出 JavaScript 模块之间的依赖关系，并将它们打包成一个或多个静态资源文件。这些文件可以被浏览器加载，从而实现对应用程序的功能支持。

Webpack 最大的特点是模块化支持和资源打包能力。它能够处理多种类型的文件，如 JavaScript、CSS、图片等，并且支持使用各种不同的 loader 和插件来扩展其功能，比如 Babel 来编译新版 JavaScript，CSS 预处理器（如 Sass、Less）的转换，以及图片压缩等。

首先来看一个十分简单的例子

<body>
<script src="../src/main.js"></script>
</body>

console.log('after');

在这里面我通过引入外部JS文件到html中，页面正常打印

1.png

但是在实际的开发过程中我们经常需要把代码分到多个文件中去（例如vue的模块化开发），如此一来在一些模块之间有相互依赖的时候就需要通过export抛出和import引入去实现。但是，由于兼容性的问题，浏览器是读不懂这种代码的

import { add } from './tools/add.js'
console.log(add(1, 2));
console.log('after');

1.png 所以需要手动告诉浏览器，我在这里需要用模块化

    <script type="module" src="../src/main.js"></script>

要说一次两次就算了，项目可不是一两个文件就能做完的。这个时候就需要一个类似于webpac的打包工具了

使用webpack

安装Webpack

首先，我们需要在项目中安装Webpack。和其他工具的安装方法一样，通常都是通过命令安装，而且需要注意的是webpack通常只在开发环境中生效，所以安装webpack一般都是安装在开发环境下

npm install webpack webpack-cli -D

创建Webpack配置文件

Webpack的配置文件是一个名为webpack.config.js的JavaScript文件。在项目根目录下创建一个名为webpack.config.js的文件。

1.png

接下来就需要根据webpack的格式去写了。在刚刚给出的webpack的文档中有几个最基础的概念，要说webpack简单，确实简单，跟着文档写就OK，但要难，那就主要是难在loader和各类plugin。

1.png

在我们刚刚新建的文件中首先确定需要先引入path模块，由于webpack需要读写文件，所以node的path模块必不可少。

const path = require('path');

其次就是入口和出口，简单来说，入口就是决定让你的webpack工具要“吃”什么，出口决定了webpack要排什么。在开发过程中我们可能会经常打包，导致之前打包的文件需要删除，但显然每次都手动删除不符合程序员的调性，所以可以在出口中设置自动清除之前的文件，并设置文件名引入哈希值，避免了文件名的重复。接下来为了方便工具的调用，在package.json中配置一下

 entry: {
        main: './src/main.js',  // 入口文件，也是主JS文件
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/chunk-[contenthash].js',//contenthash是随机生成的哈希值
        clean: true // 自动清理上一次打包的结果,且不管之前有多少个生成的文件都会被清理
    },

这样一来就能成功打包基础的html文件和js文件了。这段代码指定了Webpack的入口文件（entry）和输出文件（output）。在这个例子中，入口文件是src/main.js，输出文件是js/chunk-[contenthash].js。这里我通过给文件名添加哈希值去保证了文件名不会重复引起错误

引入

Webpack工具是由js开发而来，所以webpack天生就读得懂原生js代码，但也就只能读得懂这个了，要想还能咀嚼消化html，CSS或者vue之类的代码，就不得不提到webpack的强大之处——plugin了。相较于loader，插件plugin的功能更强，毕竟就连官方文档上都明明白白写着

1.png

对于刚刚接触webpack的人来说，整个webpack的使用，插件或者loader的引入都很简单，而plugin和loader的难点在于当官方提供的插件不足以满足需求时，可能需要自己手搓。接下来就用两个例子去介绍plugin的使用

引入html插件

在使用插件之前首先需要安装，以html的插件为例，在官方文档中很清楚地写明如何安装

npm install --save-dev html-webpack-plugin

随后就是引入对应的模块

const HtmlWebpackPlugin = require('html-webpack-plugin');

其次需要在webpack的配置文件中声明需要使用的插件，需要在抛出的模块中添加一个名为plugins的数组，需要注意的是，大部分引入的插件都是构造函数，需要new出来，同时，构造函数接受对象作为参数，对象包含了插件的配置。

plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',//模版文件
            filename: 'index.html',//生成的文件名称
            inject: 'body'//生成的JS文件的插入位置，这里指的是植入到html文件的body部分
        }),]

如此一来就能让webpack去打包html文件了。

Css文件打包

当我们需要将CSS文件单独打包出去，而不是混合在打包的js文件里面的时候，可以用mini-css-extract-plugin。使用方法与plugin十分类似，也是先安装插件

npm install -D mini-css-extract-plugin css-loader

随后就是引入

const MinCssExtractPlugin = require('mini-css-extract-plugin')

然后声明的时候需要在module里面，rules数组存的一个个对象就是各类loader的声明。需要特别注意的是，use数组中的各类loader使用是从右到左，我们需要让webpack先读懂css然后再把消化后的产物生成到style文件夹中，所以这里的顺序是

[MinCssExtractPlugin.loader, 'css-loader']

接下来还是和之前一样，new一个出来之后再配置一下MinCssExtractPlugin.loader

 new MinCssExtractPlugin({
            filename: 'styles/chunk-[contenthash].css',
            // 导出的文件名称
            ignoreOrder: true
        }),

再次运行webpack之后就能发现之前的css已经被单独引入到一个文件了

1.png

Babel

提到了webpack就不得不提到一下babel了。都知道js发展很快，虽然我们天天嘴上说着“这是es6的新语法”，但实际上可能是es7，es8更新的了，只不过很多人会统称为es6。但由于兼容性的问题，浏览器很可能读不懂这些语法。包括我们刚刚打包的js代码，会发现依旧是打包成箭头函数。那么如果是读不懂新语法的浏览器改如何保证能读懂打包后的代码呢？Babel应运而生。Babe是一个广泛使用的JavaScript编译器，它的主要功能是将使用最新ECMAScript标准（如ES2015及以上版本）编写的代码转换为向后兼容的JavaScript版本，通常是ES5，以确保代码能在不支持最新特性的老旧浏览器或环境中正常运行。这一过程也被称为转译（transpiling）。

总结 webpack的使用十分简单这里也不做过多的赘述了，对于官方给出的各类插件以及npm库的插件进行一定的了解和学习就基本足以满足使用了。