快捷導(dǎo)航

JavaScript自定義Webpack配置實(shí)現(xiàn)流程介紹

更新時(shí)間：2022年10月19日 16:48:09 作者：橘貓吃不胖～

本系列主要整理前端面試中需要掌握的知識(shí)點(diǎn)。本節(jié)介紹webpack如何優(yōu)化前端性能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1 初始化并創(chuàng)建要被打包的文件

首先創(chuàng)建文件夾webpack-demo（隨便起一個(gè)），用來演示打包過程。在該文件夾下終端運(yùn)行命令，對(duì)項(xiàng)目進(jìn)行初始化操作，對(duì)包進(jìn)行管理：

npm init # 輸入命令后一直敲回車即可
npm init -y # -y是yes的意思，在初始化時(shí)省去敲回車的步驟

命令成功運(yùn)行之后，該文件夾下出現(xiàn)了package.json文件，文件內(nèi)容具體如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后在本地安裝webpack和webpack-cli，執(zhí)行以下命令：

npm install webpack webpack-cli --save-dev

該命令執(zhí)行完成之后，在當(dāng)前目錄下出現(xiàn)了node_modules文件夾和package-lock.json文件，目錄結(jié)構(gòu)如下：

在webpack-demo文件夾下創(chuàng)建文件夾src，在src下創(chuàng)建兩個(gè)文件，index.js和hello.js，目錄結(jié)構(gòu)如下：

在hello.js文件中編寫如下代碼：

function hello() {
    console.log("hello");
}
export default hello;

在index.js文件中編寫如下代碼：

import hello from "./hello";
hello();

到這一步我們的準(zhǔn)備工作就完成了，接下來在該示例上操作。

2 命令行配置

webpack-cli給我們提供了豐富的終端命令行指令，可以通過以下命令查看：

npx webpack --help

我們看到有很多命令可以幫助我們進(jìn)行配置，接下來我們演示幾個(gè)。

# --entry 指定了入口文件為index.js
# --mode 指定模式為production生產(chǎn)環(huán)境
npx webpack --entry ./src/index.js --mode production

運(yùn)行該命令之后，我們可以看到目錄新出現(xiàn)了dist文件夾，文件夾中有main.js文件，該文件就是我們打包之后的文件。

那么dist文件夾的名字和main.js文件的名字可以自己定義嗎？答案是可以，但是我們需要在命令行中輸入其他的參數(shù)。

到這里我們發(fā)現(xiàn)，命令行不方便也不直觀，而且不能保存我們的一些配置，因此webpack為我們提供了通過自定義配置文件的方式幫助我們自定義配置參數(shù)。

3 配置文件配置

我們?cè)?code>webpack-demo文件夾中新建文件webpack.config.js文件，這個(gè)文件名不能隨意起，因?yàn)?code>webpack會(huì)自動(dòng)讀取文件，在該文件中配置entry和output制定輸入和輸出的文件：

module.exports = {
    entry: "./src/index.js", // 設(shè)置入口文件
    output: {
        filename: "bundle.js", // 指定輸出的文件
        path: "./dist", // 指定輸出的路徑
    }
}

配置完成之后我們?cè)诮K端運(yùn)行命令來打包文件：

npx webpack

結(jié)果我們可以看到，終端為我們報(bào)了錯(cuò)，提示我們輸出路徑必須是一個(gè)絕對(duì)路徑。那么我們可以通過node中的path模塊來獲得當(dāng)前文件的路徑，通過該路徑來設(shè)置輸出路徑：

const path = require("path");
module.exports = {
    entry: "./src/index.js", // 設(shè)置入口文件
    output: {
        filename: "bundle.js", // 指定輸出的文件
        // path.resolve()把一個(gè)路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑
        // __dirname是當(dāng)前文件所在的目錄
        path: path.resolve(__dirname, "./dist"), // 指定輸出的路徑
    }
}

我們?cè)賵?zhí)行npx webpack，我們發(fā)現(xiàn)打包成功了，不過終端提示我們還應(yīng)該設(shè)置一下mode，我們?cè)谂渲梦募筇砑由?code>mode即可。

const path = require("path");
module.exports = {
    entry: "./src/index.js", // 設(shè)置入口文件
    output: {
        filename: "bundle.js", // 指定輸出的文件
        // path.resolve()把一個(gè)路徑或路徑片段的序列解析為一個(gè)絕對(duì)路徑
        // __dirname是當(dāng)前文件所在的目錄
        path: path.resolve(__dirname, "./dist"), // 指定輸出的路徑
    },
    mode: "production" // 模式：生產(chǎn)環(huán)境
}

打包之后，我們可以看到dist文件夾下面出現(xiàn)了bundle.js文件，該文件就是我們打包之后的文件。

到此這篇關(guān)于JavaScript自定義Webpack配置實(shí)現(xiàn)流程介紹的文章就介紹到這了,更多相關(guān)JavaScript自定義Webpack 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: