webpack 中的四個(gè)核心概念 (Demo2 Source)
-
Entry
入口 -
Output
輸出 Loaders
-
Plugins
插件
??webpack 中默認(rèn)的配置文件名稱是 webpack.config.js
病梢,因此我們需要在項(xiàng)目中創(chuàng)建如下文件結(jié)構(gòu):
.
├── index.html // 顯示的頁(yè)面
├── main.js // webpack 入口
├── webpack.config.js // webpack 中默認(rèn)的配置文件
└── bundle.js // 通過 webpack 命令生成的文件,無需創(chuàng)建
entry
入口
??入口起點(diǎn)(entry point)指示 webpack
應(yīng)該使用哪個(gè)模塊嬉愧,來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后。 webpack
會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)(直接和間接)依賴的檬寂。
??可以在 webpack.config.js
中 配置 entry
屬性讨跟,來指定一個(gè)入口或多個(gè)起點(diǎn)入口,代碼如下:
moudle.exports = {
entry: './path/file.js'
};
output
輸出
?? output
屬性告訴 webpack
在哪里輸出它所創(chuàng)建的 bundles
易猫,以及如何命名這些文件耻煤。你可以通過在配置指定一個(gè) output
字段,來配置這些過程:
const path = require('path');
moudle.exports = {
entry: './path/file.js',
output:{
path: path.resolve(__dirname,'dist'),
filename: 'my-webpack.bundle.js'
}
}
??其中 output.path
屬性用于指定生成文件的路徑准颓,output.filename
用于指定生成文件的名稱哈蝇。
Loaders
?? Loaders
讓 webpack
能夠去處理那些非 JavaScript
文件(webpack
自身只理解 JavaScript)。loader
可以將所有類型的文件轉(zhuǎn)換為 webpack
能夠處理的有效模塊攘已,然后可以利用 webpack
的打包能力炮赦,對(duì)它們進(jìn)行處理。
??本質(zhì)上样勃,webpack loader
將所有類型的文件吠勘,轉(zhuǎn)換為應(yīng)用程序的依賴圖可以直接引用模塊性芬。在更高層面上,在 webpack
的配置中 loader
有兩個(gè)目標(biāo):
- 識(shí)別應(yīng)該被對(duì)應(yīng)的
loader
進(jìn)行轉(zhuǎn)換的那些文件(使用test
屬性) - 轉(zhuǎn)換這些文件剧防,從而使其能夠被添加到依賴圖中(并且最終添加到
bundle
中)(use
屬性)
??在開始下面的代碼之前批旺,我們需要安裝 style-loader 和 css-loader
$ npm install --save-dev style-loader css-loader
并在項(xiàng)目中創(chuàng)建 style.css
樣式文件:
h1{ color: red; }
??然后在 webpack.config.js
中輸入以下代碼:
const path = require('path');
module.export = {
entry: './main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
}
};
Plugins
插件
?? Loaders
被用于轉(zhuǎn)換某些類型的模塊,而插件則可以用于執(zhí)行范圍更廣的任務(wù)诵姜。插件的范圍包括汽煮,從打包優(yōu)化和壓縮,一直到重新定義環(huán)境中的變量棚唆。
??想要使用一個(gè)插件暇赤,需要 require()
它,然后把它添加到 Plugins
數(shù)組中宵凌,多數(shù)插件可以通過選項(xiàng)自定義鞋囊。也可以在一個(gè)配置文件中因?yàn)椴煌康亩啻问褂猛粋€(gè)插件,這時(shí)需要通過使用 new
操作符來創(chuàng)建它的實(shí)例瞎惫。
??在開始下面的代碼之前溜腐,我們需要安裝 html-webpack-plugin 插件:
$ npm install html-webpack-plugin --save-dev
它可以簡(jiǎn)化HTML文件的創(chuàng)建,為您的webpack包提供服務(wù)瓜喇。
??然后在 webpack.config.js
中輸入以下代碼:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const config = {
entry: './main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' })
]
};
module.exports = config;
運(yùn)行與配置
?? 最后我們可以直接通過 webpack
命令編譯打包,如果想要在其命令后加入?yún)?shù)挺益,可以通過配置 package.json
文件中的 scripts
屬性:
{
scripts: {
"build": "webpack --config webpack.config.js --progress --display-modules"
}
}
當(dāng)然如果你想要更改默認(rèn)的配置文件名稱,可以將 --config
后面的 webpack.config.js
配置文件名改為你自定義的名稱乘寒。
??通過以下命令執(zhí)行:
$ npm run build