之前写过webpack4系列文章，本次对webpack4进行更再次研究学习
webpack官网
webpck中文网
中文网更新慢，建议两个官网配合参考，已官网为主，中文辅助
我们先了解一下webpck的几个核心概念
- Entry（入口）
- Output（出口）
- Loaders（加载器）
- Plugins（插件）
- Mode（模式）
- Browser Compatibility（浏览器兼容性）
截止到目前，webpck4，最高版本是4.32.2，demo以此版本为主
开发环境搭建
项目地址
初始化，这一步不用赘述
npm init
也可以执行
npm init -y
快速的进行初始化
安装webpck和webpack-cli
webpack-cli是 Webpack 的 CLI （Command-line interface）工具
npm install --save-dev webpack
npm install --save-dev webpack-cli
方便演示在demo中添加lodash
npm install --save lodash
lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。方便处理js对象，数组，字符串等等，具体信息参见官网
lodash 官网
lodash中文网较多，以下推荐使用
lodash中文网
demo初始化（具体参见官网）
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
import _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<meta charset="utf-8">
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
webpck4支持零配置
方便开发，我们全局安装npx
npm install -g npx
npx 是一个方便开发者访问node_modules内的命令行的小工具，npx webpack -v 相当于执行了
node ./node_modules/webpack/bin/webpack -v
开始打包
我们可以使用
npx webpack
进行打包
或者也可修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build":"webpack"
}
添加一个build命令
然后执行npm run build
打开index.html
页面成功打开
打包成功，生成了一个dist目录，同时携带警告信息
因为没有配置打包模式（mode），默认启用了production模式
关于mode，稍后讨论
我们观察，在package.json的同级目录下生成了一个dist文件夹，dist文件夹下有一个main.js，这是怎么来的？
webpack4既然支持零配置，那么就必然存在默认配置，作为前端，对于webpack的工作就是根据自己的项目需求，更改webpack的这些默认配置
要修改默认配置，毋庸置疑，我们就要添加配置文件
关于配置文件的命名，没有强制要求，但是一般会做如下命名
webpck.xxx.js
例如
webpck.config.js
webpck.common.js
webpck.dev.js
webpck.pro.js
入口（entry）和出口（output）
我们在根目录下创建一个webpack.config.js
entry
关于entry，中文网介绍的很详细，下面做简单介绍
入口分单入口和多入口（但是出口只会有一个）
在webpack.config.js中我们使用commonjs语法进行导出
单入口，简写方式如下
module.exports = {
entry: "./src/index.js"
};
修改package.json
"build":" webpack --config webpack.config.js"
删除dist，执行
npm run build
dist 目录下打包出main.js文件
entry调整
module.exports = {
entry: {
main: "./src/index.js"
}
};
删除dist，执行打包
没有什么变化，再次调整，将main改为main1
module.exports = {
entry: {
main1: "./src/index.js"
}
};
删除dist，执行打包
dist 目录下打包出main1.js文件
我们得出结论
单入口打包，默认入口名称为main，可以省略，省略后，可以使用字符串来配置入口
出口的输出名就是入口名，关于出口的具体内容稍后讨论
说完了单入口，再看多入口
多入口
多入口支持数组和对象
配置多入口，代码做如下调整
src 下
新建MutiEntryIndex1.js
import _ from "lodash";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["webpack", "多入口打包文件1"], " ");
return element;
}
document.body.appendChild(component());
新建MutiEntryIndex2.js
import _ from "lodash";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["webpack", "多入口打包文件2"], " ");
return element;
}
document.body.appendChild(component());
index.html做如下修改
<!-- <script src="./dist/main.js"></script> -->
<script src="./dist/MutiEntryIndex1.js"></script>
<script src="./dist/MutiEntryIndex2.js"></script>
webpck.config.js
module.exports = {
entry: {
MutiEntryIndex1:"./src/MutiEntryIndex1.js",
MutiEntryIndex2:"./src/MutiEntryIndex2.js",
}
};
删除dist 目录，执行打包npm run build
dist 下生成两个js文件
MutiEntryIndex1.js
MutiEntryIndex2.js
打开index.html
同样的，多入口支持简写
module.exports = {
entry: ["./src/MutiEntryIndex1.js","./src/MutiEntryIndex2.js"]//多入口简写
};
可以发现，简写多入口后，入口文件名没了，
打包后发现dist下生成一个main.js
我们修改index.html,然后引入main.js
浏览器打开index.html
显示不变
这似乎不是一种值得推荐的简写方式，不过没有好与坏，结合自己的需要使用吧
多入口应用场景参考
- 分离 应用程序(app) 和 第三方库(vendor) 入口；
关于这个问题，有诸多解决方案，webpack4可以通过optimization.splitChunks对此进行优化，后面讨论 - 多页面应用程序；
关于多页面，配合html-webpack-plugin使用，是最佳选择，当然不是必须的
context(上下文)
基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader
如果配置了context
则修改entry的配置
const path =require('path')
module.exports = {
context: path.resolve(__dirname, "src"),
entry: "./index.js",//单入口简写
};
效果相同
entry总结
关于entry（入口就介绍到这里）
entry支持单入口，多入口，
支持字符串，数组，对象的方式
entry的默认名为main，如果要修改，使用对象的方式进行调用和配置
求点赞，求关注~
网友评论