webpack在配置文件：webpack.base..conf.js中將模塊分為幾大塊球恤，主要分為 ：entry/output/module/plugins
modules.export={
entry:{
/* 入口文件 */
},
output:{
/* 出口文件 */
},
module:{
/* Loader less吠昭、sass乾翔、vue恢着、es6等轉(zhuǎn)化*/
rules:[{},{},{}]
},
plugins:[
/* 插件 */
],
}
-
entry----入口文件
入口文件：Webpack 會遞歸的探索出 入口文件中所依賴的模塊，并按照順序 利用 Loader 進(jìn)行處理其做，常用的3種格式
// 單入口文件
entry: "app.js"
//多入口文件
entry: ["app.js", "main.js"];
// 對象形式的多入口文件
entry: {
app: "./src/js/app.js",
main: "./src/js/main.js"
}
2.output --- 出口文件
出口文件： webpack打包后文件的具體配置囱挑，主要用于build之后版本
// 打包后的文件路徑 ，通常會從 config配置文件中取build配置下的 assetsRoot
//assetsRoot: path.resolve(__dirname, '../dist'),
path: config.build.assetsRoot
// 打包后文件的名字
//1.[name].js 以入口文件名
// 2.[hash].js 以打包后的hash值
// 3.[chunkhash] 以改模塊打包后的哈希值
filename: '[name].js',
// 上線時的公共路徑缠劝，主要應(yīng)用于線上 通常是 '/'
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
// 按需加載模塊事輸出的文件名稱
chunkFilename: 'js/[name].js'
3.loader --- 編譯轉(zhuǎn)化
loader： 將一切瀏覽器不支持的語言潮梯，處理成 瀏覽器可以支持。
// 基本結(jié)構(gòu)
module:{
rules:[
{
test:/\.xxx$/,//以xxx結(jié)尾的文件
loader: "xxx-loader", // 用于處理轉(zhuǎn)化的工具
exclude: {排除的路徑}, // 這些路徑下的文件不做處理
include: {包含的路徑},// 對該路徑下的內(nèi)容進(jìn)行轉(zhuǎn)化
options: {Loader配置} // 接口參數(shù)配置
}
]
}
-
plugins -- 插件
插件：我們使用 Loader 處理不同類型的文件惨恭，當(dāng)有某種其他方面的需求時秉馏，比如 抽離 CSS 、生成多頁面 HTML
plugins:[
//主要用于壓縮文件
new UglifyJsPlugin({/*options*/});
//用于拷貝文件 主要用于拷貝static靜態(tài)文件
new CopyWebpackPlugin({/*options*/})
// 熱更新插件
new webpack.HotModuleReplacementPlugin()
// 主要用于生成HTML脱羡，可以規(guī)定 模板HTML萝究，也可以為 模板傳入?yún)?shù)，壓縮文件等
new htmlWebpackPlugin({//打包后的文件名
filename: "index.html",
//模板
template: "index.html",
//為true自動生成script標(biāo)簽添加到html中
//或者寫 body/head 標(biāo)簽名
inject: false,//js的注入標(biāo)簽
//通過<%= htmlWebpackPlugin.options.title %>引用
title: "參數(shù)title",
//通過<%= htmlWebpackPlugin.options.date %> 引用
date: new Date()
//網(wǎng)站的圖標(biāo)
favicon: 'path/to/yourfile.ico'
//生成此次打包的hash
//如果文件名中有哈希锉罐，便代表有 合理的緩沖
hash: true,
//排除的塊
excludeChunks: [''],
//選中的塊 與入口文件相關(guān)
chunks: ['app','people'],
//壓縮
minify:{
removeComments: true,collapseWhitespace: true,
minifyJS: true, minifyCSS: true,minifyURLs: true,
}
}) ]
