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