安裝
//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack
定義配置文件
-
新建webpack.config.js
(主要包括入口文件路徑和打包后文件的存放路勁)module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js"http://打包后輸出文件的文件名 } }
終端里運(yùn)行webpack
(該命令會自動(dòng)引用webpack.config.js文件中的配置選項(xiàng))
loaders
Loaders需要單獨(dú)安裝并且需要在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置
Loaders的配置包括以下幾方面：
- test：一個(gè)用以匹配loaders所處理文件的拓展名的正則表達(dá)式（必須）
- loader：loader的名稱（必須）
- include/exclude:手動(dòng)添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
- query：為loaders提供額外的設(shè)置選項(xiàng)（可選）
一切皆模塊
Webpack有一個(gè)不可不說的優(yōu)點(diǎn)，它把所有的文件都都當(dāng)做模塊處理，JavaScript代碼，CSS和fonts以及圖片等等通過合適的loader都可以被處理。
//安裝
npm install --save-dev style-loader css-loader
//使用
module.exports = {
...
module: {
rules: [
{
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
};
