概述
- 1.什么是 webpack
- webpack 是一套 基于 NodeJS 的 模块打包工具
- 在webpack刚推出的时候就是一个单纯的JS模块打包工具
- 可以将多个模块的JS文件合并打包到一个文件中
- 但是随着时间的推移、众多开发者的追捧和众多开发者的贡献
- 现在webpack不仅仅能够打包JS模块, 还可以打包CSS/LESS/SCSS/图片等其它文件
- 2.为什么要分模块
- 如果将所有的JS代码都写到一个文件中, 十分不利于代码的维护和复用
- 所以我们可以将不同的功能写到不同的模块中, 这样就提升了代码的维护性和复用性
- 但是当将代码写到不同模块时新的问题又出现了
- 例如:导入资源变多了, 请求次数变多了, 网页性能也就差了
- 例如:不同功能都放到了不同模块中了, 那么如何维护模块之间的关系也变成一个难题了
- 3.如何解决上述问题
- 3.1 项目上线时将用到的所有模块,都合并到一个文件中
- 3.2 在 index.html 中只导入主文件, 在主文件中再导入依赖模块
webpack打包JS模块
方式1:指令
- 1.安装 webpack
- npm init -y #初始化 package.json 文件
- npm install --save-dev webpack
- npm install --save-dev webpack-cli
- 2.在终端中输入打包的指令
- npx webpack ./index.js
- 注意点
- index.js 就是需要打包的文件
- 打包之后的文件会放到 dist 目录中, 名称叫做 main.js
Header.js
function addHeader() {
let oDiv = document.createElement("div");
oDiv.innerText = "我是头部";
document.body.appendChild(oDiv);
}
// 暴露模块
exports.addHeader = addHeader;
Content.js
function addContent() {
let oDiv = document.createElement("div");
oDiv.innerText = "我是内容";
document.body.appendChild(oDiv);
}
exports.addContent = addContent;
Footer.js
function addFooter() {
let oDiv = document.createElement("div");
oDiv.innerText = "我是底部";
document.body.appendChild(oDiv);
}
exports.addFooter = addFooter;
index.js
// 导入模块
const hModule = require("./Header.js");
const cModule = require("./Content.js");
const fModule = require("./Footer.js");
// 使用模块
hModule.addHeader();
cModule.addContent();
fModule.addFooter();
方式2:配置文件
- 1.什么是 webpack 配置文件
- 我们在打包JS文件的时候需要输入: npx webpack index.js
- 这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
- 其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外
- 还可以通过配置文件的方式告诉webpack需要打包哪个文件
- 2.webpack 常见配置
- entry:需要打包的文件
- output:打包之后文件的相关配置
- mode:打包模式 development / production
- development:开发模式,不会压缩打包后的JS代码
- production:生产模式,会自动压缩打包后的JS代码
新建 webpack.config.js 文件
const path = require('path');
module.exports = {
// 指定打包的模式
// 1.开发模式(development): 不会对打包的JS代码进行压缩
// 2.生产模式(production): 会对打包的JS代码进行压缩
mode: "production", // "production" | "development" | "none"
entry: "./index.js",
// output: 指定打包之后的文件相关配置
output: {
// filename: 指定打包之后的JS文件的名称
filename: "bundle.js",
// path: 指定打包之后的文件存储路径
path: path.resolve(__dirname, "web"),
}
}
- 直接执行:npx webpack
- 3.webpack 配置注意事项
- 配置文件的名称必须叫做 webpack.config.js, 否则直接输入 npx webpack 打包会出错
- 如果要使用其它名称, 那么在输入打包命令时候必须通过 --config 指定配置文件名称
- npx webpack --config xxx
- 4.打包命令简化
- 每次输入npx webpack --config xxx 来打包文件会有一麻烦, 所以我们可以通过
- npm script 来简化这个操作
比如:将 webpack.config.js 文件名称修改为 test.js,并删除 web 目录