概念

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-loadervar 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+ 版本。

今日分享

浪淘沙令·帘外雨潺潺

南唐】李煜

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

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

译文：

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

webpack4 文档（入门） - 第一章 - 概念相关推荐

Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件基础组件在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件高级组件本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为图片浏览器,它使用 tree 和 data view 组 ...
前端框架：AntdUI 文档入门
目录前端框架:Ant Design UI 文档入门官方文档 · 在线地址: Ant Design Pro 版本文档更多入口:`[如下图所示]` 前端框架:Ant Design UI 文档入门你 ...
腾讯文档 - 入门使用手册
文章目录腾讯文档 - 入门使用手册使用 · 注意 · 事项: 1. 先阅读用户服务协议 2. 文档分享 3. 增加协同者.文档转让.权限设置 4. 文档指定区域锁定 5. 保存腾讯文档 - 入门 ...
wps文档一敲空格就换行_wps文档中第一行字后面有很多空格，可是第二行就是上不来，按删除键就会把第一行字删了，为什么...
点击查看wps文档中第一行字后面有很多空格,可是第二行就是上不来,按删除键就会把第一行字删了,为什么具体信息答:wps文档中第一行字后面有很多空格,可是第二行就是上不来,按删除键就会把第一行字删了是 ...
wps文字退格会删掉文字_wps文档中第一行字后面有很多空格，可是第二行就是上不来，按删除键就会把第一行字删了，为什么...
wps文档中第一行字后面有很多空格,可是第二行就是上不来,按删除键就会把第一行字删了,为什么如果下一行文字是一个整体,上一行行末放不下这个整体内容,就会出现这种情况. 选中,右击,段落,换行和分页, ...
Python入门——第一章 python编程基础
Python入门文章目录 Python入门第一章 python编程基础 1.1 基本输入输出 1.1.1使用print()函数进行简单输出 chr()函数 print()输出到指定文件 print ...
《深入解析Windows操作系统》--第一章概念和工具
这一章似乎本来不用怎么说的,没什么大不了的东西,还是微软出书的一贯风格,先做一番广告而已.但是作为开篇第一章,也起到了给全书定基调的作用,所以还是说说吧. 1.1Windows ...
WebApi入门第一章（WebApi介绍）
本文部分内容参考官方文档 1.WebAPI概念介绍 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于 ...

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

概念