vue webpack打包入口文件是哪个_Vue 学习笔记(二十五):webpack 相关
Webpack 是什么
Vue CLI Webpack 相關?
Webpack
更多參考官方文檔
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源。?
如圖,Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件,減少了頁面的請求。
本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。
如果你還不熟悉 webpack,請閱讀核心概念和打包器對比
安裝
前提,本地支持 node.js
安裝最新版本?npm install --save-dev webpack
如果你使用 webpack 4+ 版本,你還需要安裝 CLI。?npm install --save-dev webpack-cli
對于大多數項目,我們建議本地安裝。這可以使我們在引入破壞式變更(breaking change)的依賴時,更容易分別升級項目。通常,webpack 通過運行一個或多個 npm scripts,會在本地 node_modules 目錄中查找安裝的 webpack:
"scripts": {"start": "webpack --config webpack.config.js"
}
當你在本地安裝 webpack 后,你能夠從 node_modules/.bin/webpack 訪問它的 bin 版本。
全局安裝(不推薦)?npm install --global webpack:不推薦全局安裝 webpack。這會將你項目中的 webpack 鎖定到指定版本,并且在使用不同的 webpack 版本的項目中,可能會導致構建失敗。
核心概念
webpack 是高度可配置的。四個核心概念:
入口(entry) 輸出(output) loader 插件(plugins)
入口(entry)
入口起點(entry point)指示 webpack 應該使用哪個模塊,來作為構建其內部依賴圖的開始。進入入口起點后,webpack 會找出有哪些模塊和庫是入口起點(直接和間接)依賴的。
每個依賴項隨即被處理,最后輸出到稱之為 bundles 的文件中,我們將在下一章節詳細討論這個過程。
可以通過在 webpack 配置中配置 entry 屬性,來指定一個入口起點(或多個入口起點)。默認值為 ./src。
接下來我們看一個 entry 配置的最簡單例子:
webpack.config.js
module.exports = {entry: './path/to/my/entry/file.js'
};
根據應用程序的特定需求,可以以多種方式配置 entry 屬性。可以了解更多配置方式。
出口(output)
output 屬性告訴 webpack 在哪里輸出它所創建的 bundles,以及如何命名這些文件,默認值為 ./dist。基本上,整個應用程序結構,都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段,來配置這些處理過程:?
webpack.config.js
const path = require('path');module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
通過 output.filename 和 output.path 屬性,來告訴 webpack bundle 的名稱,以及我們想要 bundle 生成(emit)到哪里。可能你想要了解在代碼最上面導入的 path 模塊是什么,它是一個 Node.js 核心模塊,用于操作文件路徑。
生成(emitted 或 emit) 是“生產(produced)”或“釋放(discharged)”的特殊術語
更多 output 可配置的特性
更多 output 概念
loader
loader 讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊,然后你就可以利用 webpack 的打包能力,對它們進行處理。
本質上,webpack loader 將所有類型的文件,轉換為應用程序的依賴圖(和最終的 bundle)可以直接引用的模塊。
loader 能夠 import 導入任何類型的模塊(例如 .css 文件),這是 webpack 特有的功能,其他打包程序或任務執行器的可能并不支持。我們認為這種語言擴展是有很必要的,因為這可以使開發人員創建出更準確的依賴關系圖。
在更高層面,在 webpack 的配置中 loader 有兩個目標:
test 屬性,用于標識出應該被對應的 loader 進行轉換的某個或某些文件。
use 屬性,表示進行轉換時,應該使用哪個 loader。
webpack.config.js
const path = require('path');const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
以上配置中,對一個單獨的 module 對象定義了 rules 屬性,里面包含兩個必須屬性:test 和 use。這告訴 webpack 編譯器(compiler) 如下信息:“嘿,webpack 編譯器,當你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時,在你對它打包之前,先使用 raw-loader 轉換一下。”
在 webpack 配置中定義 loader 時,要定義在 module.rules 中,而不是 rules。在定義錯誤時 webpack 會給出嚴重的警告。
插件(plugins)
loader 被用于轉換某些類型的模塊,而插件則可以用于執行范圍更廣的任務。插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量。插件接口功能極其強大,可以用來處理各種各樣的任務。
想要使用一個插件,你只需要 require() 它,然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件,這時需要通過使用 new 操作符來創建它的一個實例。
webpack.config.js?
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝const webpack = require('webpack'); // 用于訪問內置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
插件列表
模式
通過選擇 development 或 production 之中的一個,來設置 mode 參數,你可以啟用相應模式下的 webpack 內置的優化
module.exports = {mode: 'production'
};
Getting Started
從零開始一個基本的構建過程
Vue CLI Webpack 相關
簡單的配置方式
webpack 配置最簡單的方式就是在?vue.config.js?中的?configureWebpack?選項提供一個對象:
// vue.config.jsmodule.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
該對象將會被 webpack-merge 合并入最終的 webpack 配置。
有些 webpack 選項是基于?vue.config.js?中的值設置的,所以不能直接修改。例如,應該修改?vue.config.js?中的?outputDir?選項而不是?output.path;應該修改?vue.config.js?中的?publicPath?選項而不是?output.publicPath。因為?vue.config.js?中的值會被用在配置里的多個地方,以確保所有的部分都能正常工作在一起。:::
如果需要基于環境有條件地配置行為,或者想要直接修改配置,那就換成一個函數 (該函數會在環境變量被設置之后懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內,你可以直接修改配置,或者返回一個將會被合并的對象:
// vue.config.jsmodule.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產環境修改配置...
} else {
// 為開發環境修改配置...
}
}
}
鏈式操作 (高級) Chaining (Advanced)
Vue CLI 內部的 webpack 配置是通過 webpack-chain 維護的。這個庫提供了一個 webpack 原始配置的上層抽象,使其可以定義具名的 loader 規則和具名插件,并有機會在后期進入這些規則并對它們的選項進行修改。
它允許更細粒度的控制其內部配置。常見修改?vue.config.js?中的?chainWebpack
修改 Loader 選項
// vue.config.jsmodule.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的選項...
return options
})
}
}
對于 CSS 相關 loader 來說,推薦使用 css.loaderOptions 而不是直接鏈式指定 loader。這是因為每種 CSS 文件類型都有多個規則,而?css.loaderOptions?可以確保你通過一個地方影響所有的規則。
添加一個新的 Loader
// vue.config.jsmodule.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
// 你還可以再添加一個 loader
.use('other-loader')
.loader('other-loader')
.end()
}
}
替換一個規則里的 Loader
如果你想要替換一個已有的基礎 loader,例如為內聯的 SVG 文件使用?vue-svg-loader?而不是加載這個文件:
// vue.config.jsmodule.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不這樣做,接下來的 loader 會附加在該規則現有的 loader 之后。
svgRule.uses.clear()
// 添加要替換的 loader
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
}
}
修改插件選項
// vue.config.jsmodule.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* 傳遞給 html-webpack-plugin's 構造函數的新參數 */]
})
}
}
你需要熟悉 webpack-chain 的 API 并閱讀一些源碼以便了解如何最大程度利用好這個選項,但是比起直接修改 webpack 配置,它的表達能力更強,也更為安全。
比方說你想要將?index.html?默認的路徑從?/Users/username/proj/public/index.html?改為?/Users/username/proj/app/templates/index.html。通過參考 html-webpack-plugin 能看到一個可以傳入的選項列表。可以在下列配置中傳入一個新的模板路徑來改變它:
// vue.config.jsmodule.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].template = '/Users/username/proj/app/templates/index.html'
return args
})
}
}
可以通過接下來要討論的工具?vue inspect?來確認變更。
審查項目的 webpack 配置
Inspecting the Project's Webpack Config?
因為?@vue/cli-service?對 webpack 配置進行了抽象,所以理解配置中包含的東西會比較困難,尤其是當你打算自行對其調整的時候。
vue-cli-service?暴露了?inspect?命令用于審查解析好的 webpack 配置。那個全局的?vue?可執行程序同樣提供了?inspect?命令,這個命令只是簡單的把?vue-cli-service inspect?代理到了你的項目中。
該命令會將解析出來的 webpack 配置、包括鏈式訪問規則和插件的提示打印到 stdout。
你可以將其輸出重定向到一個文件以便進行查閱:
vue inspect > output.js它輸出的并不是一個有效的 webpack 配置文件,而是一個用于審查的被序列化的格式。
也可以通過指定一個路徑來審查配置的一小部分:
# 只審查第一條規則vue inspect module.rules.0
或者指向一個規則或插件的名字:
vue inspect --rule vuevue inspect --plugin html
最后,你可以列出所有規則和插件的名字:
vue inspect --rulesvue inspect --plugins
以一個文件的方式使用解析好的配置
有些外部工具可能需要通過一個文件訪問解析好的 webpack 配置,比如那些需要提供 webpack 配置路徑的 IDE 或 CLI。在這種情況下你可以使用如下路徑:
/node_modules/@vue/cli-service/webpack.config.js該文件會動態解析并輸出?vue-cli-service?命令中使用的相同的 webpack 配置,包括那些來自插件甚至是你自定義的配置。
總結
以上是生活随笔為你收集整理的vue webpack打包入口文件是哪个_Vue 学习笔记(二十五):webpack 相关的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Kafka高性能相关
- 下一篇: vue warning如何去掉_详解 v