1、初始化npm專案 npm init -y 得到 package.json
2、安裝 webpack,webpack-cli相關 npm install webpack webpack-cli --dev
node_modules .bin目錄有webpack相關
即可透過npm 執行 webpack命令
如: npm webpack --version
可直接執行 webpack命令進行打包
也可這麼著:
webpack預設src/index.js 打包到 dist/main.js
若自定義的話,需在專案的根目錄下,建立webpack.config.js檔案裡面的程式碼需按common.js的格式來編寫程式碼,因為它是被node環境執行。
指定打包模式:
production development none
webpack 資源模組載入
npm install css-loader --dev
webpack.config.js 中新增 rules
npm install style-loader --dev
use陣列裡是從後往前執行的,所以需要先要css-loader 編譯,再用style-loader 引用。
npm install file-loader --dev
publicPath: 配置網站的根目錄
npm install url-loader --dev
npm install babel-loader @babel/core @babel/preset-env --dev
HTML loader
npm install html-loader --dev
配置觸發 webpack loader的屬性。
自動清理輸出目錄:
npm install clean-webpack-plugin --dev
透過webpack輸出HTML檔案
npm install html-webpack-plugin --dev
lodash語法:
自動編譯:
watch模式
npm install webpack-dev-server --dev