安裝主包

yarn add webpack webpack-cli webpack-dev-server -D

根據項目實際需求安裝loaders，webpack-loaders列表

根據項目實際需求安裝插件， webpack-plugins列表

常用包列表

常用配置

webpack-dev-server

module.exports = {...devServer: {// 監聽端口，默認式8080port: 8080,// 指定使用一個host地址，默認式localhosthost: '0.0.0.0',// 啟用https服務，開啟后默認提供自制簽名，也可以傳入一個object提供指定證書https: true,// https: {//   key: fs.readFileSync("/path/to/server.key"),//   cert: fs.readFileSync("/path/to/server.crt"),//   ca: fs.readFileSync("/path/to/ca.pem"),// }// 靜態文件根目錄，可以使用數組提供多個目錄，推薦使用絕對路徑contentBase: path.resolve('public'),// 啟動服務后是否打開瀏覽器，推薦使用cli方式 `--open`，可自由控制open: true,// 是否啟用gzip壓縮compress: true,// 啟用 webpack 的模塊熱替換特性hot: true,// 轉發請求，通常用來轉發api請求proxy: {// 監聽規則'/api': {/*** derServer運行在localhost的8080端口，數據服務運行在 80 端口，* 轉發 /api 路徑下的請求到 localhost 的80端口，* 這樣可以免去服務器端的跨域設置*/// 轉發地址target: 'http://localhost',// 轉發規則pathRewrite: {'^/api': '/'}}}}...
}

sass-loader

module.exports = {...module: {rules: [{test: /\.scss/,use: [{ loader: 'style-loader'}, // 將 JS 字符串生成為 style 節點{ loader: 'css-loader' },  // 將 CSS 轉化成 CommonJS 模塊{ loader: "sass-loader" }  // 將 Sass 編譯成 CSS]}]}...
}

clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {...plguins: [new CleanWebpackPlugin() // 默認情況下會刪除配置 output.path 目錄中的所有文件]...
}

html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {...plguins: [new HtmlWebpackPlugin({// html document的title，默認為Webpack Apptitle: '', // 輸出的html的文件名稱filename: '',// html模板所在的文件路徑template: '',// chunks主要用于多入口文件，選擇需要編譯的入口文件chunks: []})]...
}

html-webpack-inline-source-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')module.exports = {...plguins: [new HtmlWebpackPlugin({...inlineSource: '.(js|css)',...}),new HtmlWebpackInlineSourcePlugin () // 插件必需寫在 HtmlWebpackPlugin 后面]...
}