資訊專欄INFORMATION COLUMN
摘要：在尋找相對路徑的文件時會以為根目錄，默認(rèn)為執(zhí)行啟動時所在的當(dāng)前目錄。在文件被添加到依賴圖中時，將其轉(zhuǎn)換稱為了模塊。配置中的兩個目標(biāo)。僅限高級用途，默認(rèn)情況下自動生成生成文件的文件名。
webpackwebpack現(xiàn)在是主要的打包工具了，現(xiàn)在網(wǎng)絡(luò)上也有很多資料可以學(xué)習(xí)了。這里主要整理了一些基礎(chǔ)概念，但沒有所有的寫，只是把之前遇到的問題記錄了一下。
本文的原文在我的博客中：github.com/RachelRen/b…
歡迎star
概念
基本概念
簡單配置
優(yōu)化
webpack是一個js應(yīng)用程序的模塊化打包器，它將遞歸地構(gòu)建一個依賴關(guān)系圖，其中包括應(yīng)用程序需要的每個模塊，然后將所有模塊打包成少量的bundle.
entry這個告訴webpack從哪里開始，并根據(jù)依賴關(guān)系圖確定需要打包的內(nèi)容。
module.exports = {
entry: "./src/app/index.js"
}
單個入口
entry: string|Array
對象語法
entry: {[entryChunkName: string]: string|Array
Webpack 在尋找相對路徑的文件時會以 context 為根目錄，context 默認(rèn)為執(zhí)行啟動webpack時所在的當(dāng)前目錄。
module.exports = {
context: path.resolve(__dirname, "app")
}
output
告訴webpack在哪里打包應(yīng)用程序
output: {
path: path.resolve(__dirname, "build"),
filename: "js/[name].js",
publicPath: "/",
chunkFilename:"js/[name].chunk.js",
//chunkFilename:"js/[name].[chunkhash:8].chunk.js",
},
這里 filename chunkFilename的區(qū)別？
chunkhash 和 hash 的區(qū)別？
每次輸出都有什么樣的配置呢？
詳情請看我的另一篇博客 webpack之輸出
loader因為webpack自身只理解Javascript，但是程序本身也需要處理（.css, .html, .scss, .jpg,etc.）,所以webpack把這些文件都作為模塊來處理。 webpack loader在文件被添加到依賴圖中時，將其轉(zhuǎn)換稱為了模塊。webpack配置loader中的兩個目標(biāo)。
識別出（identify）應(yīng)該被對應(yīng)的loader進(jìn)行轉(zhuǎn)換的那些文件（test屬性）
轉(zhuǎn)換這些文件，從而使其能夠被添加到依賴圖中，并且最終添加到bundle中（use屬性）
module.exports = {
module: {
rules: [
test: /.html");"html-loader"
}
]
}
}
use可以跟一個數(shù)組，表示指定多個loader
loader的特性loader可以時同步的，也可以是異步的
接受查詢參數(shù)，用于對loader傳遞配置
能夠使用 options對象進(jìn)行配置
除了使用package.json常見的main屬性，還可以將普通的npm模塊導(dǎo)出為loader，做法是在packago.json里定義一個loader字段
插件可以為loader帶來更多特性
loader 模塊需要導(dǎo)出為一個函數(shù)，并且使用Node.js兼容的Javascript編寫。通常使用npm進(jìn)行管理，但是也可以將自定義loader作為應(yīng)用程序中的文件。
關(guān)于loader的具體的詳細(xì)特征，可以看我的另一篇博客：webpack之Loader
plugins因為loader只是每個文件的基本轉(zhuǎn)換，但是plugins主要用于在打包模塊的“compilation”和“chunk”生命周期執(zhí)行操作和自定義功能。使用插件需要require()它，然后把它添加到plugins的數(shù)組中，多數(shù)插件可以通過選項（option）自定義，也可以在一個配置文件中因為不同目的而多次使用同一個插件。
const config = {
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: "./src/index.html"})
]
};
插件是一個具有apply屬性的javascript對象，apply屬性會被webpack compiler調(diào)用，并且compiler對象可在整個編譯生命周期訪問。
配置webpack配置文件是導(dǎo)出一個對象的javascript文件，他是標(biāo)準(zhǔn)的nodejs CommonJs模塊，可以做以下事情
通過require(...)導(dǎo)入其他文件
通過require(...)使用npm的工具函數(shù)
使用JavaScript控制流表達(dá)式，如");操作符
編寫并執(zhí)行函數(shù)來生成部分配置
常用插件 ExtractTextPlugin遇到的問題
| 參數(shù) | 說明 | 類型 |
|---|---|---|
| id | 此插件實例的唯一 ident。（僅限高級用途，默認(rèn)情況下自動生成） | String |
| filename | 生成文件的文件名?？赡馨?[name], [id] and [contenthash] | string |
| allChunks | 從所有額外的 chunk(additional chunk) 提?。J(rèn)情況下，它僅從初始chunk(initial chunk) 中提?。?/td> | |
| 當(dāng)使用 CommonsChunkPlugin 并且在公共 chunk 中有提取的 chunk（來自ExtractTextPlugin.extract）時，allChunks **必須設(shè)置為 true | Boolean | |
| ignoreOrder | 禁用插件 | Boolean |
| disable | 禁用順序檢查 (這對 CSS 模塊很有用！)，默認(rèn) false | Boolean |
ExtractTextPlugin.extract(options: loader | object)
從一個已存在的 loader 中，創(chuàng)建一個提取(extract) loader。支持的 loader 類型 { loader: [name]-loader -> {String}, options: {} -> {Object} }。
| 名稱 | 類型 | 描述 |
|---|---|---|
| options.use | {String}/{Array}/{Object} | loader 被用于將資源轉(zhuǎn)換成一個 CSS 導(dǎo)出模塊 (必填) |
| options.fallback | {String}/{Array}/{Object} | loader（例如 "style-loader"）應(yīng)用于當(dāng) CSS 沒有被提取(也就是一個額外的 chunk，當(dāng) allChunks: false) |
| options.publicPath | {String} | 重寫此 loader 的 publicPath 配置 |
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
importLoaders: 1
}
}]
})
},
{
test: /.scss");"style-loader",
use: [{
loader: "css-loader",
}, {
loader: "postcss-loader",
options: {
plugins: [require("autoprefixer")({
broswers: ["last 3 version", "ie >= 10"]
})]
}
}, {
loader: "sass-loader",
}]
})
}
],
plugins: [
new ExtractTextPlugin({
filename: "style.css",
allChunks: true,
ignoreOrder: false,
disable: false
}),
]
}
}
HtmlWebpackPlugin
可以用這個插件生成一個html文件，使用lodash模版提供的模版，或者使用自己的loader
基本用法
var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
entry: "index.js",
output: {
path: "dist",
filename: "index_bundle.js"
},
plugins: [new HtmlWebpackPlugin()]
};
將生成一個／dist／index.html
"UTF-8">
webpack App
也可以使用模版，產(chǎn)生html，并將css插入到html中
new HtmlWebpackPlugin({
filename: "index.html",
template: paths.appHtml,
// template: __dirname + "/src/app/index.html",
inject: true,
chunks: ["vendor", "index"], //會自動將js文件插入html中
chunksSortMode: "dependency"
}),
CommonsChunkPlugin
是一個可選的用于建立一個獨(dú)立文件(又稱作 chunk)的功能,這個文件包括多個入口 chunk 的公共模塊.通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存起來到緩存中供后續(xù)使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.bundle.js" //gave the chunk a different name
}),
使用 CommonsChunkPlugin 為每個頁面間的應(yīng)用程序共享代碼創(chuàng)建 bundle。由于入口起點(diǎn)增多，多頁應(yīng)用能夠復(fù)用入口起點(diǎn)之間的大量代碼/模塊，從而可以極大地從這些技術(shù)中受益。
不過這個插件在Webpack 4 后就不用了。
webpack 4.0
extract-text-webpack-plugin 不再支持
構(gòu)建模式mode，必須配置這個屬性
公共代碼提取：將CommonsChunkPlugin 直接改為optimization.splitChunks和optimization.runtimeChunk這兩個配置。
壓縮上
壓縮插件更新到 uglifyjs-webpack-plugin 1.0 版本，支持多進(jìn)程壓縮，緩存以及es6語法，無需多帶帶安裝轉(zhuǎn)換器。當(dāng) mode="production" 默認(rèn)開啟壓縮，無需配置?？梢酝ㄟ^ optimization.minimize 和 optimization.minimizer 自定義配置。測試發(fā)現(xiàn),第二次打包時間是第一次打包的一半左右
Webpack 4 配置最佳實踐 webpack基本配置項總結(jié)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7391.html
摘要：之輸出的最后就是為了得到打包結(jié)果。在這里可以看到很多相似，但是有不同含義的名次，如和，和，那他們有什么區(qū)別呢而這里的又是什么意思呢將多個模塊打包之后的代碼集合稱為。在這樣打包的話，會報錯。所以就想搞明白這兩個的區(qū)別到底是什么。webpack之輸出 webpack的最后就是為了得到打包結(jié)果。 那這是一個怎么樣的過程，不同的配置，會有什么樣的結(jié)果呢？ 本文的原文在我的博客中:github.com...
摘要：快速排序快速排序的話，應(yīng)用了分治的思想，選取一個中間值，把小于它的值放左邊，大于它的值放右邊，然后再對這兩個分組應(yīng)用同樣的方法，遞歸下去。挖坑挖坑是自己快速回憶實現(xiàn)這個算法的形象叫法。 快速排序 快速排序的話，應(yīng)用了分治的思想，選取一個中間值，把小于它的值放左邊，大于它的值放右邊，然后再對這兩個分組應(yīng)用同樣的方法，遞歸下去。 挖坑 挖坑是自己快速回憶實現(xiàn)這個算法的形象叫法。如果現(xiàn)在有數(shù)...
摘要：快速排序快速排序的話，應(yīng)用了分治的思想，選取一個中間值，把小于它的值放左邊，大于它的值放右邊，然后再對這兩個分組應(yīng)用同樣的方法，遞歸下去。挖坑挖坑是自己快速回憶實現(xiàn)這個算法的形象叫法。 快速排序 快速排序的話，應(yīng)用了分治的思想，選取一個中間值，把小于它的值放左邊，大于它的值放右邊，然后再對這兩個分組應(yīng)用同樣的方法，遞歸下去。 挖坑 挖坑是自己快速回憶實現(xiàn)這個算法的形象叫法。如果現(xiàn)在有數(shù)...
摘要：快速排序快速排序的話，應(yīng)用了分治的思想，選取一個中間值，把小于它的值放左邊，大于它的值放右邊，然后再對這兩個分組應(yīng)用同樣的方法，遞歸下去。挖坑挖坑是自己快速回憶實現(xiàn)這個算法的形象叫法。 快速排序 快速排序的話，應(yīng)用了分治的思想，選取一個中間值，把小于它的值放左邊，大于它的值放右邊，然后再對這兩個分組應(yīng)用同樣的方法，遞歸下去。 挖坑 挖坑是自己快速回憶實現(xiàn)這個算法的形象叫法。如果現(xiàn)在有數(shù)...
閱讀 2765·2023-04-25 14:15
閱讀 2708·2021-11-04 16:11
閱讀 3399·2021-10-14 09:42
閱讀 448·2019-08-30 15:52
閱讀 2830·2019-08-30 14:03
閱讀 3550·2019-08-30 13:00
閱讀 2117·2019-08-26 11:40
閱讀 3312·2019-08-26 10:25
