webpack4 文档（入门） - 第一章 - 概念

最新推荐文章于 2024-06-21 10:31:53 发布

qin & kong

最新推荐文章于 2024-06-21 10:31:53 发布

阅读量450

点赞数

分类专栏：前端 # webpack

本文链接：https://blog.csdn.net/qq_36605165/article/details/114548255

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

webpack

20 篇文章 0 订阅

订阅专栏

概念

webpack 是一个服务于 JS 应用程序的静态模块文件打包器，它在打包的时候，会为应用程序生成依赖图，依赖图和应用程序中的模块一一映射，可以利用它来生成一个或多个打包文件。从 webpack4 开始，一般不需要配置文件，但是想要灵活打包自己的应用，还是需要指定配置文件，默认是 webpack.config.js 。

入口（Entry）

对应配置文件中的 entry ，它指定了 JS 应用程序的打包入口，每个入口对应一个 chunk 。

出口（Output）

对应配置文件中的 output，它指定了 JS 应用程序的打包出口，每个出口的 [name] 对应一个 chunk 。

// 单入口

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'bundle': './src/single.js'
    },
    // 也可写写成下面两种
    // entry: './src/single.js',
    // entry: ['./src/single.js'],
    output: {
        // 执行 webpack 命令后，打包编译生成 demo 的目录
        path: path.resolve(__dirname, 'dist'),
        // 出口文件名，和入口配置的名称对应，默认是 “main”
        filename: '[name].js'
    }
}

因为打包的入口文件是 ./src/single.js ，它又依赖了 ./src/other.js ，所以 ./src/single.js 和 ./src/other.js 都属于同一个 name 为 bundle 的 chunk 。

// 多入口

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'multi1': './src/multi1.js',
        'multi2': './src/multi2.js',
    },
    output: {
        // 执行 webpack 命令后，打包编译生成 demo 的目录
        path: path.resolve(__dirname, 'dist'),
        // 出口文件名，和入口配置的名称对应，默认是 “main”
        filename: '[name].js'
    }
}

这里有两个打包入口：multi1、mutil2 。./src/multi1 依赖了 ./src/test1.js ，./src/multi2.js 依赖了 ./src/test2.js ，所以 ./src/multi1.js 和 ./src/test1.js 属于 name 为 multi1 的 chunk ，./src/multi2.js 和 ./src/test2.js 属于 name 为 multi2 的 chunk。

Loaders

只要提供合适的 loader 加载器，webpack 几乎可以处理任意类型的文件。接下来测试使用 import 导入一个 txt 文件，我们首先安装一下 raw-loader ，这里使用 yarn 安装。

yarn add raw-loader -D

./src/index.js

// ./src/index.js
import text from './other.txt';
console.log(text);

./src/other.txt

// ./src/other.txt (其实这个注释也是文本..)
我是一个txt文件

webpack.config.js

// 测试 raw-loader

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'main': './src/index.js'
    },
    output: {
        // 执行 webpack 命令后，打包编译生成 demo 的目录
        path: path.resolve(__dirname, 'dist'),
        // 出口文件名，和入口配置的名称对应，默认是 “main”
        filename: '[name].js'
    },
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    },
}

编译输出

执行一下打包后的 JS ，输出：

// ./src/other.txt (其实这个注释也是文本..)
我是一个txt文件

分析打包后的 JS ，发现 raw-loader 把 ./src/other.txt 文件转成了一个模块，default 属性就是 txt 的内容。

 "./src/other.txt":
 (function(module, __webpack_exports__, __webpack_require__) {
      "use strict";
      eval(`
        __webpack_require__.r(__webpack_exports__);
        /* harmony default export */ 
        __webpack_exports__[\"default\"] = (\"// ./src/other.txt (其实这个注释也是文本..)\\r\\n我是一个txt文件\");
        //# sourceURL=webpack:///./src/other.txt?`
      );
 })

Loaders 由 module.rules 选项配置，每个 rule 有最基本的两个属性 test 和 use ，test 用于匹配文件名及后缀，use 为 loader 的名称。

Plugins

Loaders 用于转换特定类型的模块，而 Plugins 用于执行更广泛的任务，它可以获取 webpack 内部的状态、优化 bundle 、管理模块资产和注入环境变量等等。接下来测试使用 HtmlWebapckPlugin ，用它来生成 html 文件和注入脚本。

首先需要安装一下 html-webpack-plugin 插件，这里为了方便以后到处使用全局安装，因为我的是 webpack4 ，所以这里安装同版本的插件，防止出现问题。

yarn global add html-webpack-plugin@4

./src/index.html

<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

webpack.config.js

// 测试 HtmlWebpackPlugin
var HtmlWebpackPlugin = require('html-webpack-plyarnugin');
var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        'main': './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

编译后，在 ./dsit 目录生成了 index.html ，并且还自动插入了打包的脚本。

<!-- ./dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script src="main.js"></script></body>
</html>

Mode

webpack4 之前不支持 mode 这个选项，mode 有3种取值： 'production' 、’development‘ 和 'node' 。默认取值为 'production' ，每个模式下编译后的代码有着不同的优化程度。

浏览器兼容性

webpack 支持所有支持 ES5 的浏览器，不支持 IE8 及以下的浏览器，webpack 在使用 import() 的时候，要用到 Promise ，这个是 ES6 的，需要使用引入腻子脚本来兼容。

环境

参考文档是基本 webpack4 的，webpack5 需要 nodejs v10.13.0+ 版本。

今日分享

浪淘沙令·帘外雨潺潺

南唐】李煜

帘外雨潺潺，春意阑珊。罗衾不耐五更寒。梦里不知身是客，一晌贪欢。

独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。

译文：

门帘外传来雨声潺潺，浓郁的春意又要凋残罗织的锦被受不住五更时的冷寒。只有迷梦中忘掉自身是羁旅之客，才能享受片时的欢娱。独自一人在太阳下山时在高楼上倚靠栏杆遥望远方，因为想到旧时拥有的无限江山，离别它是容易的，再要见到它就很艰难。像流失的江水凋落的红花跟春天一起回去也，一是天上一是人间。

qin & kong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4 文档（入门） - 第一章 - 概念

概念webpack 是一个服务于 JS 应用程序的静态模块文件打包器，它在打包的时候，会为应用程序生成依赖图，依赖图和应用程序中的模块一一映射，可以利用它来生成一个或多个打包文件。从 webpack4 开始，一般不需要配置文件，但是想要灵活打包自己的应用，还是需要指定配置文件，默认是 webpack.config.js 。入口（Entry）对应配置文件中的 entry ，它指定了 JS 应用程序的打包入口，每个入口对应一个 chunk 。出口（Output）对应配置文件中的 output
复制链接

扫一扫

专栏目录