安裝主包

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

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

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

常用包列表

包名說明

webpack	webpack主程序，配置列表
webpack-cli	webpack命令，webpack4.0以上必需
webpack-dev-server	webpack開發(fā)模塊，常用配置
style-loader	將css內(nèi)容轉(zhuǎn)換成js字符串，生成style節(jié)點
css-loader	將css文件轉(zhuǎn)換成CommonJS模塊，在js文件中可以使用import等方式引入css
sass-loader	將sass/scss編譯成css，需要安裝包node-sass或sass，常用配置
clean-webpack-plugin	刪除構(gòu)建文件，常用配置
html-webpack-plugin	html打包插件，常用配置
html-webpack-inline-source-plugin	將js、css等代碼內(nèi)聯(lián)到html中，依賴html-webpack-plugin，常用配置
friendly-errors-webpack-plugin	開發(fā)環(huán)境下，友好的錯誤提示插件，可自定義編譯完成后的顯示
progress-bar-webpack-plugin	開發(fā)環(huán)境下，編譯進(jìn)度條，可自定義進(jìn)度條樣式和顯示文字
open-browser-webpack-plugin	開發(fā)環(huán)境下，編譯完成后自動打開瀏覽器

常用配置

webpack-dev-server

module.exports = {...devServer: {// 監(jiān)聽端口，默認(rèn)式8080port: 8080,// 指定使用一個host地址，默認(rèn)式localhosthost: '0.0.0.0',// 啟用https服務(wù)，開啟后默認(rèn)提供自制簽名，也可以傳入一個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"),// }// 靜態(tài)文件根目錄，可以使用數(shù)組提供多個目錄，推薦使用絕對路徑contentBase: path.resolve('public'),// 啟動服務(wù)后是否打開瀏覽器，推薦使用cli方式 `--open`，可自由控制open: true,// 是否啟用gzip壓縮compress: true,// 啟用 webpack 的模塊熱替換特性hot: true,// 轉(zhuǎn)發(fā)請求，通常用來轉(zhuǎn)發(fā)api請求proxy: {// 監(jiān)聽規(guī)則'/api': {/*** derServer運行在localhost的8080端口，數(shù)據(jù)服務(wù)運行在 80 端口，* 轉(zhuǎn)發(fā) /api 路徑下的請求到 localhost 的80端口，* 這樣可以免去服務(wù)器端的跨域設(shè)置*/// 轉(zhuǎn)發(fā)地址target: 'http://localhost',// 轉(zhuǎn)發(fā)規(guī)則pathRewrite: {'^/api': '/'}}}}... }

sass-loader

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

clean-webpack-plugin

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

html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {...plguins: [new HtmlWebpackPlugin({// html document的title，默認(rèn)為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 后面]... }

總結(jié)

以上是生活随笔為你收集整理的使用webpack搭建个性化项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。