webpack --- [讀書筆記] webpack中常用的一些配置項

1. Webpack

當前Web開發面臨的困境

文件依賴關系錯綜復雜
靜態資源請求效率低
模塊化支持不友好
瀏覽器對高級JavaScript特性兼容程度低

1.1 webpack概述

webpack是一個流行的前端項目構建工具,可以解決當前web開發中所面臨的困境.

webpack提供了友好的模塊化支持,以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能,從而讓程序員把工作的重心放到具體的功能實現上,提高了開發效率和項目的可維護性

1.2 webpack的基本使用

1.2.1 創建列表隔行變色項目

創建package.json: npm init -y
新建src: 源代碼目錄
新建 src -> index.html
初始化頁面基本的結構

<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個li</li><li>這是第2個li</li><li>這是第3個li</li><li>這是第4個li</li><li>這是第5個li</li><li>這是第6個li</li><li>這是第7個li</li><li>這是第8個li</li><li>這是第9個li</li></ul>
</body>

// index.js
import $ from 'jquery'$(function() {$('li:odd').css('backgroundColor', 'lightblue')$('li:even').css('backgroundColor', '#ccc')
})

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

1.2.2 在項目中安裝和配置webpack

安裝webpack相關的包: npm install webpack webpack-cli -D
在項目根目錄中,創建名為 webpack.config.js的webpack配置文件
在webpack的配置文件中,初始化如下基本配置:

module.exports = {mode: 'development'
}

在 package.json配置文件中的scripts節點下,新增dev腳本如下:

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

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

1.2.3 入口與出口

webpack的4.x版本中默認約定:

打包的入口文件為 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 自動打包功能

自動打包工具: npm install webpack-dev-server -D
修改 package.json -> scripts

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

執行后會有如下幾行輸出

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

第一句話說明項目運行在 'http://localhost:8080’中

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

因此需要在index.html 導入打包的文件

在http://localhost:8080地址查看自動打包效果

1.2.5 html-webpack-plugin生成預覽頁面

作用: 將src下面的index.html復制到內存中,且默認的路徑是項目的根目錄,還會自動導入內存中的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 自動打包相關參數

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

1.3 通過loader打包非js模塊

在實際開發中,webpack默認只能打包處理以 .js 后綴名結尾的模塊,其他非 .js 后綴名的模塊,webpack默認處理不了,需要調用 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']}}
}
// 多個loader的調用順序是: 從后往前調用的

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']}}
}
// 多個loader的調用順序是: 從后往前調用的
// can not find module 'less' -> 是因為沒用安裝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']}}
}
// 多個loader的調用順序是: 從后往前調用的
// 安裝的是sass,驗證的是scss
// node-sass的安裝可能需要改變源,

1.3.4 自動添加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的參數項.

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

1.3.6 打包處理js文件中的高級語法

babel轉換器相關的: npm i babel-loader @babel/core @babel/runtime -D
babel語法插件相關的: 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()]
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250308.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250308.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250308.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！