快捷導(dǎo)航

JavaScript webpack5配置及使用基本介紹

更新時(shí)間：2022年09月05日 10:25:32 作者：小綿楊Yancy

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。這篇文章主要介紹了JavaScript webpack5配置及使用基本介紹

一、webpack

1.1 簡介

在最原始的前端開發(fā)中，我們引入js和css等文件都是通過手動(dòng)地在html中插入script和link標(biāo)簽來達(dá)到引用的目的，不僅繁瑣，每個(gè)文件都需要單獨(dú)發(fā)一次請(qǐng)求，而且容易發(fā)生變量沖突的問題。

于是提出了JavaScript模塊化的概念，依次出現(xiàn)了AMD、CommonJS、CMD、ES6模塊化等解決方案。

但是事實(shí)上，我們工程使用模塊化開發(fā)是不能直接運(yùn)行在瀏覽器上的，例如許多npm模塊都是使用的CommonJS的語法，瀏覽器并不支持。

此時(shí)便到了模塊打包工具出場的時(shí)候了，它的任務(wù)就是解決模塊間的依賴，并將項(xiàng)目打包成瀏覽器能夠識(shí)別的JS文件。

目前社區(qū)流行的打包工具有Webpack、Parcel、Rollup等。

如果你使用過vue-cli或者create-ract-app等腳手架，那么其實(shí)你已經(jīng)用過webpack了，因?yàn)樗麄兌际腔趙ebpack的二次封裝，所以，掌握了webpack的原理，能夠更好地去開發(fā)vue和react工程項(xiàng)目。

1.2 五大核心概念

項(xiàng)目中webpack的配置文件是位于根目錄的：webpack.config.js

entry (入口)

入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個(gè)模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始，例如vue項(xiàng)目中的main.js就是打包時(shí)的入口文件。

module.exports = {
  entry: './src/main.js'
};

項(xiàng)目中的所有依賴都應(yīng)該直接或者間接地與入口文件關(guān)聯(lián)起來，例如我們都是在main.js中引入外部模塊（axios、router、elementUI等）。

output (出口)

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認(rèn)值為 ./dist。

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
  	//__dirname是當(dāng)前目錄根目錄
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

ouput的path屬性決定了打包好的文件的生成位置，默認(rèn)是./dist，如果沒有，webpack會(huì)自動(dòng)創(chuàng)建這個(gè)目錄。
ouput的filename屬性決定了打包文件的名稱。

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（例如圖片，css文件、vue文件等，webpack 自身只理解 JavaScript）。

loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對(duì)它們進(jìn)行處理。

module.exports = {
  //...
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] }
    ]
  }
};

在 webpack 配置中定義 loader 時(shí)，要定義在 module.rules 中，其中test屬性是需要匹配的文件名的正則，use屬性是對(duì)應(yīng)的loader，可以是多個(gè)（數(shù)組）。

例如上面的style-loader和css-loader就是處理js中引入的css文件（如果直接在js中引入css文件，是會(huì)報(bào)錯(cuò)的）。

plugin (插件)

oader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。

插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量，插件增強(qiáng)了webpack的功能。

要使用插件，對(duì)于webpack內(nèi)置的插件，我們通過引入webpack然后直接訪問內(nèi)置插件即可，對(duì)于外部插件，我們需要先安裝，然后require引入，然后在plugin數(shù)組引入插件（new）實(shí)例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
const config = {
  module: {
    rules: [
      //...
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

上面的html-webpack-plugin插件就是根據(jù)模板(template)頁面在打包的目錄中自動(dòng)生成一個(gè)對(duì)應(yīng)的html文件，并且自動(dòng)插入打包生成js文件的script標(biāo)簽（正常webpack打包并不會(huì)生成html文件）。

mode (模式)

開發(fā)模式（development）：優(yōu)化打包速度，優(yōu)化代碼調(diào)試。
生產(chǎn)模式（production）：優(yōu)化打包速度，優(yōu)化代碼運(yùn)行的性能

module.exports = {
  mode: 'production'
};

即打包的模式不同，那么webpack對(duì)于打包代碼的優(yōu)化策略也不一樣。

二、配置及使用

我們來搭建一個(gè)非常簡單的webpack項(xiàng)目??。

項(xiàng)目結(jié)構(gòu)

接著我們創(chuàng)建基本的項(xiàng)目結(jié)構(gòu)和文件??。

my-webpack-demo
├── src
| └── index.js（入口文件）
├── utils
| └── time.js（時(shí)間工具）
├── package-lock.json
├── package.json
├── webpack.config.js（webpack配置）

其中utils下的time.js負(fù)責(zé)生成當(dāng)前時(shí)間 time.js:

var time = new Date();
var m = time.getMonth() + 1;
var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
module.exports = {
  now: t,
};

入口文件index.js:

import { now } from "../utils/time.js";
document.write("現(xiàn)在是: " + now);

webpack配置文件webpack.config.js:

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
  },
};

我們?cè)诮K端執(zhí)行打包命令：

此時(shí)webpack自動(dòng)在項(xiàng)目中創(chuàng)建了dist目錄，并生成了打包好的index.js文件，那么我們?nèi)绾悟?yàn)證index.js文件是否有效呢？

使用html-webpack-plugin

由于webpack并不會(huì)自動(dòng)生成html文件，還記得上面的html-webpack-plugin插件嗎？

通過npm安裝：

在配置文件中引入：

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通過 npm 安裝
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", scriptLoading: "blocking" })],
};

記得在src下創(chuàng)建index.html模板：