https://www.red-gate.com/simple-talk/dotnet/net-development/introduction-to-vue-js-with-a-single-page-application-spa-in-visual-studio/
Main.js
import Vue from 'vue';
import App from './App.vue';
import Router from './router';
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router: Router
});
這是進入JavaScript應用程序的入口點，所以當設置webpack以創建應用程序包時，您將指向這個文件。
前三行導入設置應用程序所需的模塊。Vue是Vue.js庫，它是在packages.json文件中建立的devDependencies之一，並通過運行npm安裝下拉到開發環境中。接下來是在App.vue中定義的App組件。最後，Router導入在router.js文件中定義的路由信息，它讓Vue知道在導航到不同的URL時要顯示什麼。
在導入部分之後，可以看到一個新的Vue實例被初始化，然後告訴它綁定到index.html頁面中定義的#app元素。Vue構造函數對象的模板和組件屬性告訴Vue，您希望用App.vue中定義的App組件填充index.html中的#app元素。最後，路由器屬性允許將router.js中定義的路由信息傳遞給Vue實例。
Router.js
該文件用於初始化Vue路由器，並定義以什麼URL顯示哪些組件。
import Vue from 'vue';
import VueRouter from 'vue-router';
import PageA from './Pages/PageA.vue';
import PageB from './Pages/PageB.vue';
const routes = [
{ path: '/', component: PageA },
{ path: '/pagea', component: PageA },
{ path: '/pageb', component: PageB },
]
Vue.use(VueRouter);
const router = new VueRouter({ mode: 'history', routes: routes });
export default router;
再次從導入開始。這次導入Vue庫。Vue Router庫，用於管理Vue的路由選擇（同時也是package.json中的devDepende.）以及兩個PageA和PageB（分別從PageA.vue和PageB.vue導入）的Vue組件。接下來是定義URL和顯示哪個組件的路由數組，然後調用Vue.use(VueRouter)，它初始化Vue中的路由。之後，您創建一個新的VueRouter實例，並傳入定義的路由，以及告訴路由器如何管理頁面狀態信息（在本例中，我使用“history”模式）。
然後返回初始化的VueRouter實例作爲模塊的默認導出。
App.vue
這是應用程序中的頂級組件。在應用程序中，它是一個非常重要的組件：
<template>
<div>
Hello from App Vue: <strong>{{</strong> message <strong>}}</strong>
<router-link to="/pagea">Go to A</router-link>
<router-link to="/pageb">Go to B</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Message from App.vue',
};
}
};
</script>
組件在頁面上呈現時顯示來自App.vue的message內容。它還有一個<router-view>組件，其中將顯示與路由器中的URL相關聯的組件。爲了演示該功能，有兩個<router-link>組件，允許用戶從PageA切換到PageB。您可以從Vue路由器頁面瞭解有關Vue中路由的更多細節。
PageA.vue / PageB.vue
頁面組件也是非常簡單的組件，它們可以演示路由是否正常工作。
<template>
<div>
Page A - <strong>{{</strong> message <strong>}}</strong>
</div>
</template>
<script>
export default {
name: 'PageA',
data() {
return {
message: 'Data from Page A'
};
}
};
</script>
這個內容可以複製到PageA.vue和PageB.vue中，但是顯然您想要更新PageB.vue中的任何文本，比如PageB。與App.vue類似，此組件僅顯示一條消息，指示文本的定義位置。
What is Webpack?
Webpack是一個模塊捆綁器帶有用於將轉換應用到應用程序代碼的管道。要使用它，需要在應用程序中指定一個或多個入口點——在本例中，唯一的入口點是Main.js文件。Webpack然後讀取該文件並定位其中引用的任何JavaScript模塊。然後，它遞歸地讀取這些模塊並定位它們所依賴的任何JavaScript模塊，等等，直到它具有應用程序中使用的所有代碼的圖。然後，它將來自所有那些模塊的所有代碼捆綁到一個包含所有代碼的捆綁包中（有一些選項可以將捆綁包分割成多個文件，我在這裏將不深入討論）。在本例中，這看起來類似於：
大多數瀏覽器都支持ES6和JavaScript模塊的概念，因此在構建現代JavaScript應用程序時，不必使用bundler。
單文件Vue組件支持。開發人員傾向於真正理解.vue文件如何允許您爲給定組件定義HTML、腳本和CSS。但是，JavaScript不能原生地解釋.vue文件。Webpack包含一個加載程序，該加載程序讀取.vue文件，將其分解爲其組成部分，然後將其打包爲可以像正常那樣引用的JavaScript模塊。
ES5支持。您可能希望使用最新的JavaScript語法編寫應用程序。然而，當前版本的IE（在編寫本文時）和許多較老版本的瀏覽器不支持ES6。Webpack允許您添加一個插件來將代碼從ES6轉換爲ES5格式（您將使用Babel）。
優化。未優化的包初始化速度大約是相同未包的代碼的三倍。優化的包初始化速度大約快4倍（來源）。對於較小的應用程序，差異可以忽略不計，但對於較大的應用程序，您將看到一些好處。
The Build Process
應用程序文件就緒後，您最終可以關注構建過程，該過程將如下所示：
NPM Script ：
這是package.json文件中定義的腳本。它們用於設置NODE_ENV變量，以指示要運行的構建類型。
NODE_ENV：
這是一個環境變量，用於存儲NPM腳本中定義的值。
config.js：
這是一個JavaScript模塊，它導出包含根據NODE_ENV值而變化的webpack配置設置的JavaScript對象。
webpack.config.js
這是一個JavaScript模塊，它使用config.js模塊中的配置設置來設置和導出webpack配置對象。
Webpack
這是一個命令行實用程序，它讀取webpack配置並根據這些設置打包應用程序。
注意：Node JS使用公共JS模塊語法，而不是ES6模塊語法。這意味着模塊導入和導出語法在這裏與Vue應用程序中稍有不同。
Config.js
如前所述，該文件是一個Common JS模塊，包含可以根據NODE_ENV設置而變化的配置設置。儘管可以將這些配置設置直接放入webpack配置文件中，但是像這樣將它們分離出來有一些優點。webpack配置趨向於更長和更復雜，因此這使文檔大小更易於管理。其次，它提供了一個隔離，幫助人們避免更改他們應該遠離的webpack中的配置設置。
const configuration = {
// Application settings that can be configured from one environment to the next. These
// are output to the app-settings.js file that is then referenced as a plugin within
// webpack so they can be changed manually if needed.
//可以從一個環境配置到下一個環境的應用程序設置。這些設置被輸出到//app-settings.js文件，然後作爲webpack中的插件引用，以便根據需//要手動更改它們。
appSettings: {
settingA: 5,
settingB: 10
},
// Identifies the type of build that has been requested. Primarily used to vary
// settings for different types of builds.
//標識已請求的構建類型。主要用於不同類型的構建的不同設置。
buildTarget: process.env.NODE_ENV || 'development',
// Specifies whether webpack should watch for changes on the file system and
// automatically repack bundles when changes occur.
//指定webpack是否應該監視文件系統的更改，以及當發生更改時，自動重新打包包。
watch: false,
// Specifies the webpack mode
webpackMode: 'development'
};
/*******************************************************************************
* Define watch-only settings
******************************************************************************/
if (configuration.buildTarget === 'watch') {
configuration.watch = true;
}
/*******************************************************************************
* Define production-only settings
******************************************************************************/
if (configuration.buildTarget === 'production') {
// Define production-only settings
configuration.webpackMode = 'production';
}
//Export the configuration
module.exports = configuration;
這個腳本首先創建一個對象並將其存儲在配置變量中。這是最終將從這個模塊導出的配置對象，並且爲開發構建設置默認值。此配置中定義的appSettings用於特定於環境的設置，這些設置將呈現給從index.html頁面引用的app-settings.js文件。流程對象在本地可用，並提供各種與流程相關的元數據，包括訪問環境變量（通過env屬性）。接下來，將watch屬性設置爲false，將webpackMode屬性設置爲development。
在配置對象定義之後，有兩個if語句檢查buildTarget值，'watch' or'production'。在if語句中，將更改配置對象以考慮此類構建所需的設置。如果buildTarget被設置爲watch，那麼請注意watch屬性被翻轉爲true。如果buildTarget是生產，那麼webpackMode被設置爲生產。這裏只有幾個配置設置，因爲我希望保持簡單。您很可能會在您的webpack構建中遇到需要根據構建類型更改的場景，當這種情況發生時，只需在配置對象中爲它們創建一個變量，在適當的if語句中相應地更新它們，然後在webpack配置文件中使用配置設置值。此外，要知道還可以使用環境特定值修改appSettings對象。
導出模塊對於公共JS模塊的工作方式與ES6模塊稍有不同。在ES6中，使用導出關鍵字。對於Common JS，必須將導出的對象分配給module.export，這是您在腳本的最後一行看到的操作。
Webpack.config.js
最後，是時候添加驅動webpack進程的webpack配置文件了。與config.js文件一樣，這是一個公共JS模塊。該文件從packages.json文件中定義的npm腳本傳遞到webpack中。
const config = require('./config'); // Configuration settings 配置設置
const path = require('path'); // Path library used for building file locations 用於構建文件位置的路徑庫
const fileSave = require('file-save'); // Utility for writing files to disk 用於將文件寫入磁盤的實用程序
const webpack = require('webpack'); // Webpack library
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // Plugin used for loading single-component vue files 用於加載單個組件vue文件的插件。
// Output the application settings file 輸出應用程序設置文件
if (config.appSettings != null) {
// NOTE: the replace regex on the next line removes the quotes from properties. It is rudimentary and can be removed 在下一行中 replace regex，會從屬性中刪除引號
// if it causes issues (because the quotes are technically OK I just think they look bad).
//如果它引起問題(因爲在技術上還可以，我只是覺得它們看起來很糟糕)
var appSettingsOutput = JSON.stringify(config.appSettings, null, 4).replace(/\"([^(\")"]+)\":/g, "$1:");
fileSave(path.join(path.resolve(__dirname, "../../wwwroot/js"), "app-settings.js"))
.write("window.appSettings = " + appSettingsOutput);
}
const webpathConfig = {
mode: config.webpackMode, // Specifies whether to use built-in optimizations accordingly (options: production | development | none) 指定是否相應地使用內置優化
entry: "./App/main.js", // Specifies the entry point of the application where webpack begins the packaging process. 指定webpack開始打包過程的應用程序的入口點
output: {
path: path.resolve(__dirname, "../../wwwroot/js"), // Specifies the output directory for any wepback output files 指定任何wepback輸出文件的輸出目錄
filename: "bundle.js", // Specifies the file name template for entry chunks (TODO: figure out what an entry point chunk is),指定條目塊的文件名模板(找出入口點塊是什麼)
publicPath: "/js/" // Specifies the page-relative URL to prefix before assets to ensure they can be resolved by a browser. (Notice this value is injected into index.html to refer to the bundle.js file created by webpack).
//指定在資產之前前綴的頁面相關URL，以確保可以通過瀏覽器解析它們。注意，這個值被注入index.html以引用由webpack創建的bundle.js文件
},
resolve: {
alias: {
vue: 'vue/dist/vue.js' // This is required to avoid the error 'You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.'
//爲了避免“您正在使用模板編譯器不可用的僅運行時生成的Vue”的錯誤，需要這樣做。要麼將模板預編譯成渲染函數，要麼使用編譯器包含的構建。
}
},
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader' }, // Specifies that files with the .vue extension should be processed by vue-loader which is what breaks up a single-file vue component into its constituent parts.
//指定具有.vue擴展名的文件應該由vue-loader處理，vue-loader將單個文件vue組件分解爲其組成部分。
{ test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } }, // Specifies that .js files should be run through the babel-loader for ES2015 to ES5 conversion.
//指定.js文件應該在ES2015到ES5轉換的babel-loader中運行。
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }, // Specifies that CSS should be included in the bundle from .CSS files as well as processed from the <style> section of vue single-file vue component.
//指定CSS應該包含在.CSS文件的包中，以及從vue單文件vue組件的<style>部分進行處理。
// ESLint rules
{
test: /\.(js|vue)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, "App")],
options: {
eslintPath: path.join(__dirname, '../node_modules/eslint'),
fix: true,
formatter: require('eslint-friendly-formatter'),
emitError: false,
emitWarning: false,
failOnError: true,
failOnWarning: false
}
}
]
},
plugins: [
////////////////////////////////////////////////////////////////////////////////////////////
// Required per manual configuration section of the Vue Loader configuration instructions
// located at https://vue-loader.vuejs.org/guide/#vue-cli
////////////////////////////////////////////////////////////////////////////////////////////
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') },
'appSettings': "window.appSettings"
}),
],
watch: config.watch, // Flag indicating whether webpack should monitor files and update bundles automatically with any changes
watchOptions: { // Specifies watch options for the watching mechanism.
ignored: ['node_modules'] // Specifies directories to ignore (optimization).
}
};
module.exports = webpathConfig;
這可能需要考慮很多，但我將把它分解成更易於管理的部分。
Imports
導入出現在文件的前幾行。您將注意到，導入Common JS模塊使用require方法，該方法具有標識所需模塊的參數。然後，require方法的結果存儲在一個變量中，該變量可以在腳本中使用。config變量存儲具有配置設置的config.js模塊。可以在此腳本中從config變量引用config.js在配置對象上定義的任何屬性。path 變量存儲對路徑模塊的引用，該路徑模塊提供對公共路徑函數的訪問。fileSave變量存儲從文件保存模塊返回的方法。到目前爲止，一切都是普通對象，但是也可以從模塊返回方法。您將在一分鐘內使用此方法將文本寫入文件。webpack變量存儲對webpack模塊的引用。在最後，VueLoaderPlugin 存儲vue-loader插件他允許webpack處理.vue後綴的文件。
管理配置設置
下一節旨在幫助管理已編譯應用程序的配置設置。如果在應用程序中定義配置設置，那麼它們最終打包在bundle.js文件中。在生產構建中，捆綁包文件經常被優化、最小化，甚至可能被醜化。這使得在已編譯的應用程序中定位和修改配置設置極其困難。雖然您可以更新設置並重新編譯應用程序，但我發現大多數QA經理都喜歡只構建一次應用程序，因爲它減少了構建中發生更改和引入bug的可能性。爲了避免這種情況，您必須創建一個包含可以輕鬆更新的應用程序設置的文件，然後使該文件可用於已編譯的應用程序中。
如果您還記得config.js文件中定義的配置對象，那麼它具有一個appSettings屬性，用於存儲環境特定的配置設置。您只需要稍加修改就可以將這些設置寫入文件（在本例中爲app-settings.js）。
appSettings: {
settingA: 5,
settingB: 10
}
這就是應該寫入app-settings.js文件的內容：
window.appSettings = {
settingA: 5,
settingB: 10
};
webpack 允許你定義你自己的插件，它引用了已經存在的變量。您基本上可以告訴webpack，當它遇到名爲appSettings（或者任何您決定稱之爲appSettings）的東西時，它應該引用window.appSettings。這允許您在外部定義配置設置，但是仍然可以從打包代碼中引用它們（稍後將看到這個配置）。惟一需要注意的是，必須在bundle.js之前加載app-settings.js，以便當捆綁代碼運行時定義window.appSettings。
以下是來自上面示例的代碼部分，用於寫出文件：
// Output the application settings file
if (config.appSettings != null) {
// NOTE: the replace regex on the next line removes the quotes from properties. It is rudimentary and can be removed
// if it causes issues (because the quotes are technically OK I just think they look bad).
var appSettingsOutput = JSON.stringify(config.appSettings, null, 4).replace(/\"([^(\")"]+)\":/g, "$1:");
fileSave(path.join(path.resolve(__dirname, "../../wwwroot/js"), "app-settings.js"))
.write("window.appSettings = " + appSettingsOutput + ";");
}
這個腳本做的第一件事是檢查appSettings是否被定義。如果沒有，則跳過文件寫入過程。如果有要寫入的設置，則調用config.AppSettings上的JSON.stringify以獲得appSettings對象的文本表示。不幸的是，JSON.stringify在對象的屬性名周圍加上引號。這在技術上沒有什麼問題，但是閱讀起來並不容易。因此，此方法調用字符串上的.replace，並使用正則表達式從屬性名中刪除引號。如前所述，fileSave實際上是一個方法，您調用此方法並傳入要寫入的文件的名稱。該文件名是通過調用path.resolve來獲得到web應用程序中的wwwroot/js文件夾的完整路徑，然後調用path.join來連接該路徑和app-settings.js文件名來構造的。然後，它調用fileSave方法返回的文件保存實例的write，後者寫出app-settings.js文件的內容。注意，您正在這個字符串中添加window.appSettings=。
Webpack Configuration Object
如果需要，Webpack配置可能會變得非常複雜，所有使其複雜化的文檔都可以在Webpack網站上找到。我的目標是儘可能簡單地實現這一點，同時確保Vue開發的所有主要組件都就位。因此，我完全希望您需要在這裏和那裏添加一些配置，以適應您自己的應用程序的具體情況。因此，我完全希望您需要在這裏和那裏添加一些配置，以適應您自己的應用程序的具體情況。所以，讓我們開始研究這個最小配置。
您將看到的第一件事是模式（mode）屬性。這可以設置爲開發、生產或無。當沒有值設置（例如null）,默認值就是生產。此設置自動加載爲開發或生產版本優化Webpack生成的某些Webpack插件。請注意，您使用config.webpackmode設置了模式屬性值，因爲它是由config.js文件控制的設置。接下來是entry屬性。這將定義應用程序的Webpack入口點。有一個入口點main.js，字符串/app/main.js中.
output屬性是一個包含Webpack輸出設置的對象。在這個對象中，有三個屬性被設置。
路徑(path)–包含捆綁文件的寫入路徑。在本例中，將它們寫入項目中的wwwroot/js。此值必須是絕對路徑，因此您將使用path.resolve從相對路徑獲取絕對路徑。
文件名(filename)–這是用於保存包的文件名。只生成了一個文件，所以只需將其命名爲bundle.js。但是，如果您有多個入口點，您還可以在字符串中指定一些標記（名稱、ID、哈希、Chunkash、ContentHash等），以保持名稱的唯一性。
publicPath–這是輸出目錄的公共URL。這對於從服務器引用資源靜態資源（如圖像）很重要。由於項目中的wwwroot文件夾代表應用程序的根目錄，並且您要將文件放在根目錄下的JS文件夾中，因此請將該值用於公共路徑。
在output屬性之後，您將看到resolve屬性，它控制如何解析模塊。Webpack在大多數情況下都能很好地定義默認值，但是您會遇到需要修改它們的情況。其中一種情況是，Vue帶有兩個軟件包。一個包含模板編譯器，另一個不包含。默認情況下，Webpack引用的是沒有模板編譯器的版本，這會導致您在使用模板編譯器不可用的僅運行時版本Vue時出錯。要麼將模板預編譯爲呈現函數，要麼使用編譯器包含的內部版本。爲了解決這個問題，您需要引用不同版本的Vue。這是通過解析對象上的Alias屬性實現的，該屬性允許提供指向特定資源的名稱（即別名）。
在這個情形下，別名的vue引用的是一個包含編譯器的vue，它在node_modules目錄的下vue/dist/vue.js。還可以使用Alias屬性設置對應用程序中文件夾的命名引用。如果您有一個複雜的目錄結構，並且有助於避免使用長相對路徑引用文件，這些路徑必須通過應用程序目錄結構（例如…/../app/components/）進行回溯。
在resolve屬性下是module屬性，它控制Webpack中模塊的行爲。Webpack中的模塊是什麼？Webpack處理的任何文件都可以視爲模塊。一個javascript文件是一個模塊，一個vue文件是一個模塊。僅僅是css和圖片也可以是模塊。Webpack從您提供的入口點開始處理代碼。當它在代碼中遇到模塊引用（例如，導入或需要javascript中的語句、CSS中的URL、HTML頁面中的圖像引用等）時，它確定是否可以打包該模塊並執行此操作。然而，webpack本身並不瞭解每種文件類型——它要求開發人員創建名爲loaders的擴展名，以幫助webpack瞭解如何打包不同類型的文件。例如，Webpack本身不支持.vue文件，但Vue加載器插入Webpack，使Webpack能夠正確處理.vue文件。
加載程序是從模塊對象中的Rules屬性配置的。通常，規則標識處理模塊時要使用的加載程序，並定義一個測試，以確定給定文件是否滿足該加載程序處理所需的條件。配置包含四個規則，其中三個非常簡單：
{ test: /\.vue$/, loader: 'vue-loader' }
第一個規則測試模塊的文件名，如果以.vue結尾，則使用vue加載程序處理模塊。如前所述，Vue加載程序允許Webpack處理.vue文件。字符串Vue加載器解析回從package.json文件下拉的Vue加載器包。
{ test: /\.js$/, loader: 'babel-loader', options: { presets: ['es2015'] } }
第二個規則測試模塊的文件名，如果以.js結尾，則使用babel加載程序來處理該文件。這個加載程序負責將ES6/ES2015代碼轉成大多數瀏覽器支持的ES5語法中。您將注意到此規則上有一個選項屬性。option屬性允許您將特定於加載器的選項傳遞給加載器。在這種情況下，babel加載程序應該使用ES2015規則預設來生成代碼。字符串babel加載器解析回package.json文件中下拉的babel加載器包。並且ES2015預設是可用的，因爲packages.json文件中的“babel-preset-es2015”包。
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }
第三個規則測試模塊的文件名，如果以.css結尾，則使用“vue樣式加載程序”和“css加載程序”加載程序來處理文件。雖然沒有在這個項目中使用，但是這些提供了打包在單個文件Vue組件中定義的CSS文件和樣式的能力。use屬性接受加載程序數組，並可用於處理具有多個加載程序的單個模塊。
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, "App")],
options: {
eslintPath: path.join(__dirname, '../node_modules/eslint'),
formatter: require('eslint-friendly-formatter'),
emitWarning: true,
failOnError: true
}
}
第四個也是最後一個規則測試模塊的文件名，如果它以.js或.vue結尾，則使用eslint加載程序來處理該文件。這是一個檢查JavaScript代碼語法錯誤的加載程序，因此您可以預先了解它們，而不是在運行時瞭解它們。這個規則上有一些額外的屬性需要討論，其中第一個屬性是當加載程序執行順序時管理的強制屬性。值pre確保eslint在任何其他加載程序處理代碼之前在代碼上運行。接下來是include屬性，它允許您指定一個路徑數組，指示要由加載程序處理哪些文件。Webpack需要完整路徑，因此使用path.join從相對路徑構建完整路徑。或者，如果要排除某些文件，可以使用“排除”屬性。
option屬性包含一個eslint-loader配置設置，eslintPath指定這個loader執行linting使用eslint模塊的位置。
格式化（formatter ）程序屬性允許您指定一個格式化程序，用於輸出由eslint標識的錯誤。在你使用這個配置，你使用的是“eslint-friendly-formatter”變量來自package.json指定的eslint-friendly-formatter的包。接下來是emitWarning設置，您將要啓用它。這可以確保在運行Watch Build時輸出警告，因此，如果將錯誤代碼寫入Webpack正在監視的文件，則至少會出現一些消息。.最後，您需要啓用failonerror屬性，以確保在遇到錯誤時停止生成。
Webpack配置對象的下一個特性是允許自定義Webpack構建過程的插件屬性。Webpack有兩個插件，第一個插件是：
new VueLoaderPlugin()
下一個插件是：
new webpack.DefinePlugin({
'appSettings': "window.appSettings"
})
webpack允許您使用defineplugin方法定義全局常量，這裏使用defineplugin方法定義常量appsettings。您可以將這些常量設置爲任何有效的javascript表達式，在本例中，將其設置爲window.appsettings。這意味着無論何時在應用程序中引用appSettings，它最終都會實際引用window.appSettings中存儲的數據。您可能記得window.app settings是在app-settings.js文件中定義的。它包含的配置設置必須能夠在不重新編譯應用程序的情況下進行修改。這是在外部文件和編譯的代碼庫之間架起橋樑的機制。
最後，您擁有Watch和WatchOptions屬性。Watch屬性是一個布爾標記，用於指定是否希望WebPack監視生成的源文件，並在任何源文件更改時自動重新打包。在這裏，將值設置爲config.watch，該值由config.js文件中的配置代碼管理。watchOptions屬性包含允許您控制如何監視源文件的各個方面的設置。您可以設置輪詢更改的頻率，以及發現更改後等待編譯的時間。在這種情況下，您將希望使用ignored屬性來避免監視node_modules文件夾，因爲它不應該經常更改，而且可能非常大。