這篇文章為大家帶來了關於javascript的相關知識，webpack 是一個現代JavaScript 應用程式的靜態模組打包器(module bundler)，下面一起來看看JavaScript webpack5配置及使用基本介紹，希望對大家有幫助。
【相關推薦：javascript影片教學、web前端】
##一、webpack
1.1 簡介
在最原始的前端開發中，我們引入js和css等檔案都是透過手動地在html中插入script和link標籤來達到引用的目的，不僅繁瑣，每個文件都需要單獨發一次請求，而且容易發生變數衝突的問題。
於是提出了JavaScript模組化的概念，依序出現了AMD、CommonJS、CMD、ES6模組化等解決方案。
但是事實上，我們工程使用模組化開發是不能直接運行在瀏覽器上的，例如許多npm模組都是使用的CommonJS的語法，瀏覽器並不支援。
此時便到了模組打包工具出場的時候了，它的任務就是解決模組間的依賴，並將專案打包成瀏覽器能夠識別的JS檔案。
目前社群流行的打包工具有Webpack、Parcel、Rollup等。
如果你使用過vue-cli或create-ract-app等腳手架，那麼其實你已經用過webpack了，因為他們都是基於webpack的二次封裝，所以，掌握了webpack的原理，能夠更好地去開發vue和react工程專案。
1.2 五大核心概念
專案中webpack的設定檔是位於根目錄的：
webpack.config.js
entry (入口)
入口起點(entry point)指示webpack 應該使用哪個模組，來作為建立其內部依賴圖的開始，例如vue專案中的main.js就是打包時的入口檔案。
module.exports = {
entry: './src/main.js'
};登入後複製
專案中的所有依賴都應該直接或間接地與入口檔案關聯起來，例如我們都是在main.js中引入外部模組（axios、router、elementUI等）。
output (出口)
output 屬性告訴webpack 在哪裡輸出它所建立的bundles，以及如何命名這些文件，預設值為./dist。
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
//__dirname是当前目录根目录
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};登入後複製
ouput的path屬性決定了打包好的檔案的產生位置，預設是./dist，如果沒有，webpack會自動建立這個目錄。 ouput的filename屬性決定了打包檔案的名稱。
loader
loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（例如圖片，css檔案、vue檔案等，webpack 本身只理解 JavaScript）。
loader 可以將所有類型的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。
module.exports = {
//...
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] }
]
}
};登入後複製
在 webpack 配置中定義 loader 時，要定義在 module.rules 中，其中test屬性是需要匹配的檔案名稱的正則，use屬性是對應的loader，可以是多個（陣列）。
例如上面的style-loader和css-loader就是處理js中引入的css檔案（如果直接在js中引入css文件，是會報錯的）。
plugin (外掛程式)
oader 被用來轉換某些類型的模組，而外掛程式則可以用來執行範圍更廣的任務。
外掛程式的範圍包括，從打包最佳化和壓縮，一直到重新定義環境中的變量，外掛程式增強了webpack的功能。
要使用插件，對於webpack內建的插件，我們透過引入webpack然後直接存取內建插件即可，對於外部插件，我們需要先安裝，然後require引入，然後在plugin數組引入插件（new）實例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
//...
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;登入後複製
上面的html-webpack-plugin插件就是根據模板(
template)頁面在打包的目錄中自動產生一個對應的html文件，並且自動插入打包生成js文件的script標籤（正常webpack打包並不會產生html檔）。
mode (模式)
開發模式（development）：最佳化打包速度，最佳化程式碼偵錯。 生產模式（production）：優化打包速度，優化程式碼運行的效能
module.exports = {
mode: 'production'
};登入後複製
即打包的模式不同，那麼webpack對於打包程式碼的優化策略也不一樣。
二、設定及使用
我們來建立一個非常簡單的webpack專案。
專案結構
接着我们创建基本的项目结构和文件。
my-webpack-demo
├── src
| └── index.js（入口文件）
├── utils
| └── time.js（时间工具）
├── package-lock.json
├── package.json
├── webpack.config.js（webpack配置）
其中utils下的time.js负责生成当前时间 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("现在是: " + now);登入後複製
webpack配置文件webpack.config.js:
module.exports = {
entry: "./src/index.js",
mode: "development",
output: {
filename: "index.js",
},
};登入後複製
我们在终端执行打包命令：
此时webpack自动在项目中创建了dist目录，并生成了打包好的index.js文件，那么我们如何验证index.js文件是否有效呢？
使用html-webpack-plugin
由于webpack并不会自动生成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下创建index.html模板：
欧克！我们再次执行打包命令npx webpack 。
可以看到，在dist目录下不仅生成了index.js，还有index.html，我们在浏览器中打开它。
time.js成功生效咯 ！
三、写在最后
我们完成了一个非常简单的webpack项目，你是否发现了这和vue项目的打包流程十分相似呢？
只是vue-cli的功能是十分强大的，例如可以解析vue文件，热更新等等……
所以这也验证了开始说的，vue-cli是对webpack的二次封装，封装了许多loader和plugin，并且配置好了入口，出口等配置信息，我们可以拿来就用。
【相关推荐：javascript视频教程、web前端】
以上是JavaScript webpack5配置及使用基本介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
