安裝
//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
定義配置文件
-
新建webpack.config.js
(主要包括入口文件路徑和打包后文件的存放路勁)module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js"http://打包后輸出文件的文件名 } }
終端里運行webpack
(該命令會自動引用webpack.config.js文件中的配置選項)
loaders
Loaders需要單獨安裝并且需要在webpack.config.js中的modules關(guān)鍵字下進行配置
Loaders的配置包括以下幾方面：
- test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
- loader：loader的名稱（必須）
- include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）堪簿；
- query：為loaders提供額外的設(shè)置選項（可選）
一切皆模塊
Webpack有一個不可不說的優(yōu)點，它把所有的文件都都當(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"
}
]
}
]
}
};
