webpack从入门到会玩（1）- 简介

最新推荐文章于 2024-07-14 15:54:59 发布

素者素心

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量705

点赞数

分类专栏： JavaScript 文章标签： javascript webpack

本文链接：https://blog.csdn.net/tq26556570/article/details/108230288

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

什么是webpack

在目前的大前端时代，前端工程化和模块化开发已经非常普遍，从一个入口的JS文件开始，通过require函数或者import关键字等方式建立起一个复杂的模块依赖网络，加上CSS预处理less/sass/stylus等技术的广泛使用，可以说前端项目现在已经变得空前复杂。遗憾的是，浏览器并不认识模块化的JS代码，也不认识CSS预处理的样式代码，所以需要一个工具将这些模块化的代码转换成浏览器认识的原生的静态资源，webpack的核心功能就是这个。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。（来自官网的解释）

官网地址

在这里插入图片描述

学习webpack，需要先简单了解nodejs和npm。

我们来船创建一个简单的demo项目：

在这里插入图片描述
foo.js：

export function sum (a, b) {
    return a + b
}

index.js：

import {sum} from './modules/foo'

console.log(sum(1, 2))

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>
    
</body>
<script src="./index.js"></script>
</html>

上面是一段简单的ES6模块化代码，我们在浏览器中打开index.html看看效果。

在这里插入图片描述

报错了，不能在这里使用import关键字，说明浏览器并不支持这样的代码。

这时我们就需要webpack来帮我们解决这个问题了。

webpack安装

首先使用npm安装webpack，需要npm10以上版本，webpack分为全局安装和局部安装：

全局安装：安装在npm的全局目录，方便在任何目录下使用webpack命令构建项目。
局部安装：安装在当前项目里，保持webpack版本一致性，防止项目在其他人构建我们的项目时出现webpack版本冲突的问题。

因此建议全局和局部都安装。

将项目交给npm管理：

npm init

全局安装：

npm i webpack webpack-cli -g -D

局部安装：

npm i webpack webpack-cli -D

安装完成后可以查看webpack版本：

webpack --version

使用webpack命令

现在我们可以在demo项目的根目录下使用webpack命令构建项目了：

webpack .\index.js -o build.js --mode=development

index.js是要构建的入口文件。
-o 是输出的意思。
build.js是输出位置。
–mode是模式，有开发模式"development"和生产模式"production"。

这时项目中会多出一个build.js的文件，里面是一堆我们不能轻易看得懂的代码。现在修改一些index.html，让它引入build.js，我们在看看效果。

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>
    
</body>
<!-- <script src="./index.js"></script> -->
<script src="./build.js"></script>
</html>

在这里插入图片描述

打印出了3，说明我们的代码起作用了，这就是webpack为我们将模块化的代码构建成一个浏览器能识别的JS文件了。

但是我们每次修改了代码都要通过一条那么长的命令来构建，似乎有点麻烦，webpack提供了webpack.config.js配置文件的方式，预先配置好我们的构建策略，然后每次只需要使用简单的webpack命令构建项目即可，webpack会自动读取项目根目录下的webpack.config.js文件。

webpack.config.js

webpack.config.js有五个核心概念：

entry：项目入口JS文件。
output: 输出配置。
loader：webpack默认只会处理JS和JSON文件，如果需要处理其他资源，则需要相应的loader来完成。
plugins：webpack可以加载各种插件来完成更多更复杂的任务。
mode：构建模式，分为开发模式"development"和生产模式"production"。开发模式下构建出来的代码没有经过压缩，可以看到规则的格式和注释，文件体积也较大；生产模式下构建出来的代码会被压缩成一行，没有注释，体积较小。

下面在demo根目录下创建一个webpack.config.js文件：

在这里插入图片描述

按照五个核心概念编写内容：

由于webpack在nodejs的环境下运行，所以配置文件编写方式也遵循nodejs的commonjs规范编写。

// nodejs自带的路径解析工具
const {resolve} = require('path')

// commonjs的规范
module.exports = {
    // 项目的入口JS文件
    entry: './index.js',
    // 输出配置
    output: {
        // 构建好的文件输出的目录
        // 这里需要绝对路径，所以要用到resolve函数来计算项目根目录的绝对路径
        // 输出到项目根目录下的build目录下
        path: resolve(__dirname, 'build'),
        // 输出文件名
        filename: 'build.js'
    },
    module: {
        // loader会写rules数组里面
        rules: []
    },
    // 插件会卸载plugins数组里面
    plugins: [],
    // 构建模式
    mode: 'development'
}

在命令行中输入webpack命令完成构建：

webpack

构建完成后，项目根目录就会出现build文件夹，里面有一个build.js。

在这里插入图片描述

这次先写到这里，下次会讲解webpack怎么处理CSS相关的资源。喜欢的小伙伴点个关注啊，谢谢啦!

webpack从入门到会玩（2）- 样式资源

素者素心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack从入门到会玩（1）- 简介

什么是webpack在目前的大前端时代，前端工程化和模块化开发已经非常普遍，从一个入口的JS文件开始，通过require函数或者import关键字等方式建立起一个复杂的模块依赖网络，加上CSS预处理less/sass/stylus等技术的广泛使用，可以说前端项目现在已经变得空前复杂。遗憾的是，浏览器并不认识模块化的JS代码，也不认识CSS预处理的样式代码，所以需要一个工具将这些模块化的代码转换成浏览器认识的原生的静态资源，webpack的核心功能就是这个。本质上，webpack 是一个现代 JavaSc
复制链接

扫一扫