WebPack 的基本使用

概述

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 目录

WebPack 的基本使用

猜你喜欢