概念
- webpack是一個現(xiàn)代javascript應(yīng)用程序的靜態(tài)模塊打包器铭乾，
- webpack處理應(yīng)用程序時他會遞歸的構(gòu)建一個依賴關(guān)系圖爵川，其中包含應(yīng)用程序的每個模塊，然后將這些模塊打包成一個或者多個build文件
重要的四個概念
- 入口（entry）
- 輸出（output）
- loader(處理非js文件)
- 插件（plugins）
入口（enter）
告訴webpack 使用那個模塊 來作為構(gòu)建內(nèi)部依賴圖的開始单山！進(jìn)圖入口文件后授药，webpack會找到那些模塊和庫是入口起點(diǎn)（直接或者間接）的依賴！
例子：
module.exports = {
entry: './path/to/my/entry/file.js' // 我們的入口文件
};
出口（output）
output告訴webpack從哪里產(chǎn)出builds 以及如何命名這些文件 默認(rèn)值是 ./dist凹嘲。這樣整個應(yīng)用程序結(jié)構(gòu)都會編譯到你指定的文件夾中师倔。
例子
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 打包后的文件夾的名字及路徑
filename: 'my-first-webpack.bundle.js' // 打包后的js名稱
}
};
loader
loder 讓webpack能狗處理那些 非javascript 的文件（webpack自身只理解javascript）。loader可以將所有類型文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊周蹭，然后就可以利用 webpack打包模塊 來對他們進(jìn)行處理趋艘。
本質(zhì)上 webpack loader 是將 所有類型的文件 轉(zhuǎn)化為 應(yīng)用程序依賴圖（最終的bundle） 可以直接進(jìn)行引用。
webpack loader 倆個參數(shù)
-
test用于標(biāo)識出應(yīng)該被對應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的 某個 或者某個文件 -
use標(biāo)識轉(zhuǎn)換時應(yīng)該使用那個loader
例子:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 打包后的文件夾的名字及路徑
filename: 'my-first-webpack.bundle.js' // 打包后的js名稱
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
解釋：
raw-loader webpack 的原始模塊 將文件加載為字符串
module 這塊的配置告訴 webpack 在打包過程中 遇到【require 或者 import】語句被解析為 ·.txt·的時候 請用·raw-loader· 轉(zhuǎn)換一下
插件（plugins）
loader 可以用來轉(zhuǎn)換某些類型的模塊谷醉，而插件則可以執(zhí)行范圍更廣的任務(wù).
插件的范圍包括：
- 打包優(yōu)化
- 壓縮
- 重新定義環(huán)境中的變量
使用一個插件 只需要 require 它致稀。 然后給它添加到 plugins 數(shù)組中。 多數(shù)插件可以通過 options 來定義俱尼。
注意：如果你在一個配置文件中多次的使用同一個插件時抖单，這時候需要通過new 操作符來重建一個新的實(shí)例。
例子：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html 需要npm 安裝一下
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(), // 壓縮js
new HtmlWebpackPlugin({template: './src/index.html'}) // 指定模板
]
};
模式
通過 development 或 ·production· 之中的一個 來設(shè)置 mode 參數(shù)， 來啟動 webpack 內(nèi)置的優(yōu)化
module.exports = {
mode: 'production'
};
