使用webpack搭建个性化项目
生活随笔
收集整理的這篇文章主要介紹了
使用webpack搭建个性化项目
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
安裝主包
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Web服务器 - Nginx配置介绍
- 下一篇: git stash参数介绍