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 命令生成的文件，無(wú)需創(chuàng)建
entry 入口
??入口起點(diǎn)（entry point）指示 webpack 應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后。 webpack 會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)（直接和間接）依賴的。
??可以在 webpack.config.js 中 配置 entry 屬性，來(lái)指定一個(gè)入口或多個(gè)起點(diǎn)入口，代碼如下:
moudle.exports = {
entry: './path/file.js'
};
output 輸出
?? output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件。你可以通過在配置指定一個(gè) output 字段，來(lái)配置這些過程：
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 操作符來(lái)創(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
