Webpack 初始化

hotMemo發表於2024-10-07

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

相關文章