快速上手前端资源打包工具 — Webpack

(注:本文基于 Webpack 5.74.0 版本)

那是心情大好的一天,本咕在某大佬的启发下,决定重新打开 VSCode 写自己的网站时,却遇到了问题:

  1. 我通常用 less 代替 css 写样式,然而写 less 之后再在浏览器中转成 css,会遇到加载时间长的问题。
  2. 遇到给文件起名的时候,发现有些文件的名字虽然用途不同但是重名。
  3. 文件松散,不像一个前端鸽写的代码。

所以这个时候,就需要一个工具来:

  1. 将 less 或 其他不能被浏览器识别的文件 转化为能被识别的 css 或 js。
  2. 让每个文件都有独特却能理解意思的名字。
  3. 项目的目录结构更加规范化。

于是,我想到了使用打包工具。目前非常主流的打包工具主要有 Webpack 和 Vite 等等,虽然 Vite 更加简洁轻便,但是我为什么选 Webpack 大家都懂的 🙁

Webpack 中涉及的 5 大概念

1)entry 入口 —— 从哪开始打包

我们通常会将要打包的资源导入到入口文件中,这样就能顺着入口的指引将文件打包好。而打包好的文件,我们叫做 chunk(当然可以有多个入口,就会生成多个 chunk)

2)output 输出 —— 要把打包好的 chunk 放到哪去,给它起个你想要滴名字。

3)loader 加载器 —— 解析资源。

Webpack 相当于一个半成品,因为它只能解析 js 和 json 文件。如果想让它识别更多类型的文件的话,就需要加载器来帮助实现。

4)plugins 插件 —— 帮助 Webpack 实现更多功能。

5)mode 模式 —— 在不同场景下进行不同的配置。

  1. 开发模式(development),能够在开发环境中更好发挥作用;
  2. 生产模式(production),能够在代码即将上线时更好作用。

初始化 & 目录结构

  1. 首先新建文件夹并用 VSCode 打开(bushi
  2. 输入 npm init 来初始化一个新项目!
  3. 安装本体→ npm install webpack webpack-cli -D
  4. 在根目录添加以下文件夹:dist(存放输出的 chunks),src(存放资源文件源代码),public(存放网页),config(存放配置文件)
初始化完成后

1. 设置配置文件

首先,我们需要将 5 个概念与代码相结合。

在 config 文件夹中新建 webpack.config.js,写入以下代码。

const path = require('path');
module.exports = {

    // 1. 入口
    entry: {
        index: './src/index.js' // 创建以 index.js 开始打包的叫做 index 的 chunk
    },

    // 2. 输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出路径必须要用绝对路径,而 __dirname 是 Node.js 内置的帮我们设置绝对路径的参数,这里指的是输出到'dist'文件夹中
        filename: './js/[name].[contenthash:8].js',
        // [name]是原文件的名字,而[contenthash]是该文件独一无二的哈希值,8代表取的位数
    },

    // 3. 加载器
    module: {},

    // 4. 插件
    plugins: [],

    // 5. 模式
    mode: 'development'
}

这就是最基本的 Webpack 配置文件框架了!

2. 引入 HTML 的支持

虽然已经有了基本的框架,但此时的 Webpack 仍然是毛坯房,无法支持 HTML 文件的打包。

话说 HTML 为啥要打包呢?–> 1. 能够压缩代码,2. 能够自动引入已经打包好的资源文件

这里我们需要安装一个插件 —— HtmlWebpackPlugin 来实现此功能 |ू・ω・` )

npm install html-webpack-plugin

现在回到 webpack.config.js ,添加这个插件吧!

首先,在 module.exports 之前导入这个插件:

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

然后再在 plugin 中添加插件!

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "../public/index.html"), // 原文件路径
        filename: "index.html", // 输出的名称
        chunks: all // 导入所有的 chunk
    }),
],

现在我们随便写一点东西!

/public/index.html 写一个 h1 的 Hello, world

/src/index.js:

var a = 1;
var b = 2;
console.log(a + b);
console.log("This is packed by Webpack 5!");

为了编写方便,我们在根目录下 package.json 的 scripts 中添加以下代码

"start": "npx webpack --config ./config/webpack.config.js"
大致位置

接下来,我们使用 npm start 就可以进行打包了!

打包成功
打包后,index.js 能够在浏览器中正常被执行

3. 打包 CSS 文件

这次,加载 CSS 文件可不是插件了,而是一个 loader ,一个名曰 css-loader ,另一个名曰 style-loader

首先安装这两个 loader 吧 → npm install style-loader css-loader -D

接下来在配置文件中引入:

module: {
    rules: [{
        test: /\.css$/, // 正则,表示匹配所有 css 后缀的文件进行处理
        use: ["style-loader", "css-loader"] // 执行顺序从后到前,不能搞反的!
    }]
}

接下来写一个 /src/styles/index.css ,比如→ body { background-color: #607d8b; }

最后在入口处引入,也就是在其内写一个 import './styles/index.css' ~

样式生效

4. CSS 的独立运动!

虽然如此,但是 CSS 样式却被写到了 style 标签中,这显然不是我们想要的结果🤔。

所以我们需要一个东西,能把 CSS 提取成单独的文件。

欸,这还真有,是一个名曰 MiniCssExtractPlugin 的插件,咱直接安装

npm i mini-css-extract-plugin -D

然后按照 HtmlWebpackPlugin 同理的方法导入,然后在 plugins 里面加上:

new MiniCssExtractPlugin({
    filename: './styles/[name].[contenthash:8].css' // 输出文件名及路径
}),

同时记得要把上面提到的 "style-loader" 改成这个插件内置的 MiniCssExtractPlugin.loader ~

use: [MiniCssExtractPlugin.loader, "css-loader"]
index.css:我免费了!

5. 话说 Less ……

首先二话不说装 Less !

npm install less less-loader -D

问题来了:less-loader 这玩意儿放哪儿?

我们先捋清楚逻辑:Less 将 *.less 文件转换为 *.css 文件,所以应该先运行 less-loader 再运行 css-loader 才对的说 ( ̄▽ ̄)~*

所以我们应该这样:(注意:index.js 中的文件名也要改)

test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]

然后浅写一个 index.less:

body {
    background-color: #607d8b;
    h1 {
        color: #fff;
    }
}

好!保存!打包!

大功告成!累死本咕了

当然可能目前还是不够便捷,但是当后续给各位介绍开发和生产模式,以及各种工具之后,相信 Webpack 一定能成为你的帮手!

除特殊声明转载之外,本文由博主 云萧只会咕咕咕 原创,依据 CC BY-NC-SA 4.0 许可协议授权,转载请注明出处。(*◦˙▽˙◦)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇