- webpack有三個(gè)基礎(chǔ)部分：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
- 入口文件：
glob: node-glob學(xué)習(xí). node的glob模塊允許你使用 *等符號(hào), 來(lái)寫一個(gè)glob規(guī)則,像在shell里一樣,獲取匹配對(duì)應(yīng)規(guī)則的文件.這個(gè)glob工具基于javascript.它使用了 minimatch 庫(kù)來(lái)進(jìn)行匹配.
const glob = require('glob');
glob.sync('./client/*').forEach(function (filepath) {
const dirName = path.basename(filepath);
entries[dirName] = [path.resolve(__dirname, '../', filepath)]; // 轉(zhuǎn)換成絕對(duì)路徑
});
// 同步獲取文件
// 執(zhí)行結(jié)果
./client/common --------------------filepath
common [ '/home/jr/fe/myProject/client/common' ] ------------dirname
./client/index --------------------filepath
index [ '/home/jr/fe/myProject/client/index' ] ------------dirname
__dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對(duì)路徑
__filename: 總是返回被執(zhí)行的 js 的絕對(duì)路徑
process.cwd(): 總是返回運(yùn)行 node 命令時(shí)所在的文件夾的絕對(duì)路徑
- output:
filename：每個(gè)文件的名稱矢腻，默認(rèn)值是 '[name].js'(模塊名稱)
chunkFilename:這個(gè)選項(xiàng)決定了按需加載的塊文件的名稱
path: 靜態(tài)資源輸出的路徑
publicPath:加載外部資源的路徑
- module: webpack的loarder相當(dāng)于一個(gè)中間件 Webpack構(gòu)建之法，Loader
preLoaders: preLoaders就是在調(diào)用loader之前需要調(diào)用的loader, 他不做任何代碼的轉(zhuǎn)換，只是進(jìn)行檢查岗屏。
devtool:其實(shí)就是選擇一種調(diào)試代碼的方式.
webpack devtool配置簡(jiǎn)單對(duì)比. 可以設(shè)斷點(diǎn)調(diào)試，不顯示列信息，生成相應(yīng)的.Map文件，并在合并后的代碼尾部加上注釋//# sourceMappingURL=**.js.map 箭养，可以看到模塊代碼并沒(méi)有被eval()包裹，此種模式并沒(méi)有將調(diào)試信息放入D打包后的代碼中哥牍，保持了打包后代碼的簡(jiǎn)潔性
query： preset 預(yù)設(shè)組件加載和使用毕泌。
plugins 插件加載和使用。
url-loader: url-loader?limit=1000&mimetype=xxx&name=xx
.demo { background-image: url('a.png'); }那么對(duì)應(yīng)這樣的 loader 配置就能把 a.png 抓出來(lái), limit 限制文件小于1kb, mimetype指定文件類型
{ test: /jquery\.lazyload\.min\.js/, loader: 'imports?jQuery=jquery', },imports?jQuery=jquery嗅辣，jquery.lazyload依賴于jQuery撼泛，用import引入jQuery
- vue:
- imageWebpackLoader:
- postcss:http://wiki.shanyishanmei.com/pages/viewpage.action?pageId=5453410
- plugins:
HotModuleReplacementPlugin:
ExtractTextPlugin: 將所有css打包成一個(gè)css文件
AssetsPlugin: 生成靜態(tài)資源依賴文件
LiveReloadPlugin
- resolve:主要是用來(lái)配置解析模塊路徑和分析依賴
resolve.alias: 別名是 Webpack 的一個(gè)配置項(xiàng)，它的作用是把用戶的一個(gè)請(qǐng)求重定向到另一個(gè)路徑 澡谭。如果在alias中定義了值愿题，然后在代碼中require該值的時(shí)候，會(huì)重定向到alias指定的位置。
resolve.modulesDirectories: 是用來(lái)設(shè)置搜索的目錄名的潘酗，默認(rèn)值:["web_modules", "node_modules"]杆兵。如果把值設(shè)置成["mydir"]
, webpack會(huì)查詢 “./mydir”, “../mydir”, “../../mydir”等。
- eslint: 在全局環(huán)境配置eslint入口
