當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack --- [读书笔记] webpack中常用的一些配置项

發(fā)布時(shí)間：2023/12/10 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack --- [读书笔记] webpack中常用的一些配置项小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. Webpack

當(dāng)前Web開發(fā)面臨的困境

文件依賴關(guān)系錯(cuò)綜復(fù)雜
靜態(tài)資源請求效率低
模塊化支持不友好
瀏覽器對高級(jí)JavaScript特性兼容程度低

1.1 webpack概述

webpack是一個(gè)流行的前端項(xiàng)目構(gòu)建工具,可以解決當(dāng)前web開發(fā)中所面臨的困境.

webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優(yōu)化等強(qiáng)大的功能,從而讓程序員把工作的重心放到具體的功能實(shí)現(xiàn)上,提高了開發(fā)效率和項(xiàng)目的可維護(hù)性

1.2 webpack的基本使用

1.2.1 創(chuàng)建列表隔行變色項(xiàng)目

創(chuàng)建package.json: npm init -y

新建src: 源代碼目錄

新建 src -> index.html

初始化頁面基本的結(jié)構(gòu)

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script> </head> <body><ul><li>這是第1個(gè)li</li><li>這是第2個(gè)li</li><li>這是第3個(gè)li</li><li>這是第4個(gè)li</li><li>這是第5個(gè)li</li><li>這是第6個(gè)li</li><li>這是第7個(gè)li</li><li>這是第8個(gè)li</li><li>這是第9個(gè)li</li></ul> </body> // index.js import $ from 'jquery'$(function() {$('li:odd').css('backgroundColor', 'lightblue')$('li:even').css('backgroundColor', '#ccc') })

瀏覽器對ES6的兼容性不是很好,因此以上代碼可能不會(huì)顯示列表隔行變色.故下面需要使用webpack配置對ES6的支持

1.2.2 在項(xiàng)目中安裝和配置webpack

安裝webpack相關(guān)的包: npm install webpack webpack-cli -D

在項(xiàng)目根目錄中,創(chuàng)建名為 webpack.config.js的webpack配置文件

在webpack的配置文件中,初始化如下基本配置:

module.exports = {mode: 'development' }

在 package.json配置文件中的scripts節(jié)點(diǎn)下,新增dev腳本如下:

"scripts":{"dev": "webpack" }

完成上述配置后,在命令行輸入:npm run dev, webpack就會(huì)在當(dāng)前目錄的dist文件夾下面自動(dòng)生成一個(gè)main.js文件.里面裝的是瀏覽器兼容的JS代碼，因此只需在index.html中導(dǎo)入main.js即可完成2.2.1的需求

1.2.3 入口與出口

webpack的4.x版本中默認(rèn)約定:

打包的入口文件為 src -> index.js
打包的輸出文件為 dist -> main.js

如果要修改打包的入口與出口,可以修改webpack.config.js:

const path = require('path'); module.exports = {entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'} }

1.2.4 自動(dòng)打包功能

自動(dòng)打包工具: npm install webpack-dev-server -D

修改 package.json -> scripts

// package.json "scripts": {"dev": "webpack-dev-server" }

執(zhí)行后會(huì)有如下幾行輸出

i ｢wds｣: Project is running at http://localhost:8080/ i ｢wds｣: webpack output is served from / i ｢wds｣: Content not from webpack is served from D:\series\17 i ｢wdm｣: Hash: 5ea127005e76e344e080 Version: webpack 4.41.6 Time: 429ms Built at: 2020-02-12 18:46:23Asset Size Chunks Chunk Names bundle.js 671 KiB main [emitted] main Entrypoint main = bundle.js

第一句話說明項(xiàng)目運(yùn)行在 'http://localhost:8080’中

第二句話說明項(xiàng)目的打包文件在當(dāng)前目錄下,最好一句話說明打包的名字為bundle.js(在內(nèi)存中)

因此需要在index.html 導(dǎo)入打包的文件

在http://localhost:8080地址查看自動(dòng)打包效果

1.2.5 html-webpack-plugin生成預(yù)覽頁面

作用: 將src下面的index.html復(fù)制到內(nèi)存中,且默認(rèn)的路徑是項(xiàng)目的根目錄,還會(huì)自動(dòng)導(dǎo)入內(nèi)存中的bundle.js
使用步驟:
- npm install html-webpack-plugin
- 修改webpack.config.js
- const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebpackPlugin({template: './src/index.html', // 指定要用到的模板文件filename: 'index.html' })module.exports = {plugins: [htmlPlugin] }

1.2.6 自動(dòng)打包相關(guān)參數(shù)

// package.json // --open 打包完成后自動(dòng)打開瀏覽器 // --host 配置IP地址 // --port 配置端口 "scripts": {"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" }

1.3 通過loader打包非js模塊

在實(shí)際開發(fā)中,webpack默認(rèn)只能打包處理以 .js 后綴名結(jié)尾的模塊,其他非 .js 后綴名的模塊,webpack默認(rèn)處理不了,需要調(diào)用 loader 加載器才可以正常打包.

1.3.1 打包處理CSS文件

npm i style-loader css-loader -D

webpack.config.js -> module -> rules

// webpack.config.js module.exports = {module:{rules: {test: /\.css$/, use: ['style-loader', 'css-loader']}} } // 多個(gè)loader的調(diào)用順序是: 從后往前調(diào)用的

1.3.2 打包處理less文件

npm i less-loader less -D

webpack.config.js -> module -> rules

// webpack.config.js module.exports = {module:{rules: {test: /\.less$/, use: ['style-loader', 'css-loader','less-loader']}} } // 多個(gè)loader的調(diào)用順序是: 從后往前調(diào)用的 // can not find module 'less' -> 是因?yàn)闆]用安裝less

1.3.3 打包處理scss文件

npm i sass-loader node-sass -D

webpack.config.js -> module -> rules

// webpack.config.js module.exports = {module:{rules: {test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader']}} } // 多個(gè)loader的調(diào)用順序是: 從后往前調(diào)用的 // 安裝的是sass,驗(yàn)證的是scss // node-sass的安裝可能需要改變源,

1.3.4 自動(dòng)添加css的兼容前綴

npm i postcss-loader autoprefixer -D

// postcss.config.js const autoprefixer = require('autoprefixer') module.exports = {pulugins: [autoprefixer] } // webpack.config.js module.exports = {module:{rules:[{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']}]} }

1.3.5 打包樣式表中的圖片和字體文件

npm i url-loader file-loader -D

// webpack.config.js module.exports = {module:{rules:[{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:'url-loader?limit=16940' }]} }

其中？之后的是loader的參數(shù)項(xiàng).

limit用來指定圖片的大小,單位是字節(jié)(byte),只有小于limit大小的圖片,才會(huì)被轉(zhuǎn)為base64圖片

1.3.6 打包處理js文件中的高級(jí)語法

babel轉(zhuǎn)換器相關(guān)的: npm i babel-loader @babel/core @babel/runtime -D
babel語法插件相關(guān)的: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

// babel.config.js module.exports = {presets: ['@babel/preset-env'],plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'] } // webpack.config.js module.exports ={module:{rules:[{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]} }

1.3.7 webpack中配置vue組件的加載器

npm i vue-loader vue-template-compiler -D
// webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = {module:{rules:[{ test: /\.vue$/, loader: 'vue-loader'}]},plugins:[new VueLoaderPlugin()] }

總結(jié)

以上是生活随笔為你收集整理的webpack --- [读书笔记] webpack中常用的一些配置项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： vue --- [全家桶]vue-ro
下一篇： threejs纹理