//webpack 是基於nodejs的
//npx webpack 構建
//webpack的配置是物件 執行構建會找webpack.config.js這個配置檔案
const path = require('path');
const = require('clean-webpack-plugin'); //
清除打包檔案
const htmlwebpackplugin = require('html-webpack-plugin');
const webpack = require("webpack"); //
自帶熱模組替換
module.exports =,
//出口
output: ,
//常見佔位符
//hash
//name[字串的key 預設是main]
//chunkhash 根據不同入口entry進行依賴解析，構建對應的chunk，生成對應的xx,只要entry的模組麼沒有內容改變hash不變
//id
//配置模式 none development production' 生產環境會壓縮 如果沒有設定預設是 production
mode: "development",
//處理不認識的模組
module: ,,]
},,
}, , ]
},//處理 ext 什麼字尾名就是輸出什麼}]
},//推薦 url-loader 因為它包含了 file-loader的所有功能 還支援 limit限定檔案大小}]
},,
corejs: 2, //
新版本需要指定核⼼庫版本
usebuiltins: "entry" //
按需註⼊
} ],
"@babel/preset-react", //
對jsx的支援
] }}},
]},
//配置模組解析
resolve: ,
//去除字尾 不建議濫用最好帶上字尾 減少查詢時間
extensions:['.js','.json','.jsx','.ts'],
},//配置這個cdn 的不需要打包到 bundle⽂件
externals: ,
//推薦配置
//devtool:"cheap-module-eval-source-map",// 開發環境配置
//devtool:"cheap-module-source-map", // 線上⽣成配置
//測試配置
devtool: "none", //
把source-map 關閉 或者把 mode 設定為 production 設定為 source-map dist下會多乙個map檔案
//webpack-dev-server的配置
devserver:
},//自帶了express服務 mock server
res.json()})}
},//外掛程式
plugins: [
//webpack的output.path目錄中的所有檔案將被刪除一次，但是目錄本身不會。
//如果使用webpack 4+的預設配置，/ dist /下的所有內容都將被刪除
newcleanwebpackplugin(),
newhtmlwebpackplugin(,
//針對開發和生產壓縮**
}),
newwebpack.hotmodulereplacementplugin(),
]}
webpack4 x安裝和配置
npm install webpack g我們在合適位置新建乙個資料夾wpk test，用於存放我們的專案。命令列中定位到webpack test資料夾下，輸入以下命令進行專案的初始化 npm init這裡，要求設定很多選項，可以按專案情況配置也可以不填直接回車。完成後，我們發現資料夾中增加了pac...
webpack 4 x安裝命令
執行npm i webpack g全域性安裝webpack，這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...
webpack 4 X 基礎編譯
webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式，而是直接執行webpack mode development或者webpack mode production，這樣便會預設進行打包，入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...