1.基本概念:
配置方式:如果沒(méi)有創(chuàng)建webpack.config.js或指定mode (production/development)會(huì)直接打包壓縮生產(chǎn)模式。webpack配置文件的默認(rèn)名稱(chēng):webpack.config.js / webpackfile.js 一般選前一種
(1)入口entry/出口output:
entry可多入口,可構(gòu)建多頁(yè)面應(yīng)用，設(shè)計(jì)多個(gè)html文件在根目錄來(lái)一并打包實(shí)現(xiàn);
output:單出口,如果是多頁(yè)面用'[name].js',代表各個(gè)入口文件名
可以在webpack腳本中編寫(xiě)額外的代碼來(lái)動(dòng)態(tài)通過(guò)命令行參數(shù)修改entry/output構(gòu)建定制化的打包邏輯
(2)loader:webpack默認(rèn)只將JS文件模塊化,loader可以將其他文件模塊化導(dǎo)入
處理所有非js文件都支持import導(dǎo)入
loader支持鏈?zhǔn)絺鬟f
(3)plugin插件:執(zhí)行更多包括工具、打包壓縮、環(huán)境的任務(wù)
插件是構(gòu)造函數(shù)，使用時(shí)需要new一個(gè)對(duì)象
2.核心配置
let path = require('path');
export default {
? ????// 設(shè)置process.NODE_ENV的值為production或development,并啟用相應(yīng)模式下的插件
? ????mode: 'production',
? ????// 指定entry和output基礎(chǔ)目錄，分離配置文件用
? ????context:path.resolve('../src'),?
? ????// 路徑相關(guān)配置
? ????resolve: {
????????????// import 導(dǎo)入不帶后綴名優(yōu)先級(jí)
? ? ????????extensions: ['.js', '.vue', '.json'],
????????????// 路徑簡(jiǎn)寫(xiě)代理
? ? ????????alias: {?
? ? ? ????????????'@': '../src'
? ? ????????},
????????????// 第三方代碼目錄? 默認(rèn)node_modules
? ? ????????modules:[]
? ????},
? ????entry:{
? ? ????????app:"./index.js"
? ????},
? ????output:{
????????????// 加入hash值可生成不同版本的打包文件
? ? ????????path:`./dist/${Date.now()}`,
? ? ????????filename:'[name].js',
????????????// publicPath用于修改項(xiàng)目中靜態(tài)資源的引用絕對(duì)路徑,開(kāi)發(fā)環(huán)境默認(rèn)/，線上環(huán)境可能是CDN
? ? ????????publicPath:process.NODE_ENV=='production'?'http://*****':"/"
? ????},
? ????// loader放入module字段下，使用前npm install安裝
? ????module:{
? ? ????????rules:[
? ????????????????// 正則:匹配該類(lèi)型文件
? ? ? ????????????test:/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,?
? ????????????????// 使用該loader處理該文件
? ? ? ????????????loader:"url-loader",
? ????????????????// 配置
? ? ? ????????????options:{
? ? ? ? ????????????????limit: 10000,
? ? ? ? ????????????????name: utils.assetsPath('img/[name].[hash:7].[ext]')
? ? ? ????????????}
? ? ????????]
?????},
? ????// 插件?
? ????plugin:[
? ? ????????new webpack.optimize.UglifyJsPlugin()
? ????],
? ????// devServer:啟動(dòng)http服務(wù)，同時(shí)啟動(dòng)webpack，通過(guò)websocket進(jìn)行熱更新? npm run dev其實(shí)執(zhí)行的是webpack-dev-server命令
? ????// 修改index.html文件無(wú)法觸發(fā)熱更新，因?yàn)閣ebpack從entry開(kāi)始監(jiān)聽(tīng)
? ????// 開(kāi)發(fā)環(huán)境啟動(dòng)服務(wù)配置
? ????devServer:{
????????????// 地址
? ? ????????host:"",
????????????// 端口
? ? ????????port:"",
????????????// https證書(shū)
? ? ????????https:{},
????????????// 對(duì)開(kāi)發(fā)環(huán)境文件啟用gzip壓縮
? ? ????????compress:false,
????????????// 啟動(dòng)后自動(dòng)打開(kāi)網(wǎng)頁(yè)
? ? ????????open：true
? ????},
? ????// source map:代碼檢查（黑色背景的錯(cuò)誤提示）
? ????devtool: 'scource-map',
? ????watchOptions: {
? ? ????????????// 不監(jiān)聽(tīng)的node_modules目錄下的文件,這樣做會(huì)大大減少性能，只是更新node_mudules時(shí)需要重啟項(xiàng)目
? ? ????????????ignored: /node_modules/
? ????}
}
