Learn WebPack
生成package.json檔案
npm init -y
區域安裝
npm install webpack webpack-cli -D
使用區域安裝打包
方式1：
npx webpack
方式2：
在package.json中“script”中新增“build”欄位
"scripts": {
"build":"webpack"
},
然后使用npm run build即可使用區域安裝的webpack打包即可
組態檔webpack.config.js
/**
* @組態檔
* @webpack配置相關的一些東西
*/
const path = require('path')
module.exports = {
entry: "./src/index.js", // 配置入口
output: {
path: path.resolve(__dirname,'./build'), // 出口位置 及名稱 './build'
filename: 'bundle.js',
}
}
loader
loader 用于對模塊的源代碼進行轉換（決議），loader 可以使你在 import 或"加載"模塊時預處理檔案，因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法，loader 可以將檔案從不同的語言（如 TypeScript）轉換為 JavaScript，或將行內影像轉換為 data URL，loader 甚至允許你直接在 JavaScript 模塊中 import CSS檔案！ webpack自身只理解JavaScript，loader讓webpack能夠去處理非JavaScript檔案
配置loader 處理css檔案
webpack打包css檔案需要借助css對應loader,css-loader、style-loader、sass-loader、less-loader
css-loader負責將.css檔案進行決議，并不會將決議之后的css插入到頁面中；
style-loader負責完成插入style操作
loader的呼叫順序為鏈式呼叫，從后往前呼叫執行
module: {
rules: [
{
test: /\.css$/, // 正則匹配
// 1.loader的寫法（語法糖）
// loader: 'css-loader'
// 2.完整寫法
// use 里面loader 加載有順序的 css-loader因該先加載
// 因為loader的順序是從后往前執行 所以style-loader 應當寫在css-loader前面
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
},
]
}
將.less檔案處理成.css檔案
- 安裝less
npm install less -D
- 使用lessc將.less檔案決議成.css檔案
npx lessc ./src/css/style2.less ./src/css/style2.css
真實專案不可能一個一個去將less檔案處理成css檔案，而是通過使用過less-loader來處理的
module: {
rules: [
{
test: /\.css$/, // 正則匹配
// 1.loader的寫法（語法糖）
// loader: 'css-loader'
// 2.完整寫法
// use 里面loader 加載有順序的 css-loader因該先加載
// 因為loader的順序是從后往前執行 所以style-loader 應當寫在css-loader前面
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
}
postCSS
? PostCSS是一個通過JavaScript來轉換樣式的工具
? 該工具可以幫我們進行CSS的轉換和適配，自動加前綴、css樣式重置
? 實作這些功能，我們還需借助于PostCSS對應的插件 例如postcss-preset-env
- 安裝postcss
npm install postcss postcss-cli -D
- 安裝添加css瀏覽器前綴的插件 autoprefixer
npm install autoprefixer -D
- 使用postcss的autoprefixer插件自動將css生成帶瀏覽器前綴的css
npx postcss --use autoprefixer -o demo.css test.css
? 以上命令列將檔案夾下單test.css檔案處理加瀏覽器前綴后輸出成demo.css檔案
在webpack使用postcss-loader
- 安裝
npm install postcss-loader
- 使用postcss-loader和autoprefixer插件，需要配置plugin指定使用插件，具體配置如下
module: {
rules: [
{
test: /\.css$/, // 正則匹配
// 1.loader的寫法（語法糖）
// loader: 'css-loader'
// 2.完整寫法
// use 里面loader 加載有順序的 css-loader因該先加載
// 因為loader的順序是從后往前執行 所以style-loader 應當寫在css-loader前面
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer') // 使用autoprefixer插件
]
}
}
},
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
}
- 打包后的檔案中name的css屬性user-select已自動加瀏覽器前綴
- 使用postcss-preset-env插件，該插件內置autoprefixer
npm install postcss-preset-env -D
- 配置postcss插件也可單獨創建組態檔postcss.config.js
module.exports = {
plugin: [
// require('autoprefixer') // 使用autoprefixer插件
require('postcss-preset-env') // 使用postcss-preset-env插件 該插件內置autoprefixer
]
}
這斷配置代碼與在webpack.config.js中postcss-loader中這段配置一樣
options: {
postcssOptions: {
// 此處的plugins也可以在postcss.config.js檔案中配置 一樣的效果
plugins: [
// require('autoprefixer') // 使用autoprefixer插件
// require('postcss-preset-env') // 使用postcss-preset-env插件 該插件內置autoprefixer
]
}
}
file-loader
npm install file-loader -D
// webpack 5 默認有配置了file-loader 這里配置完會打包出兩個圖片檔案
{
test: /\.(jpe?g|png|gif|svg)$/i, // 匹配圖片檔案
use: [
{
loader: 'file-loader',
options: {
name:'[name]_[hash:6].[ext]',
outputPath:'images/'
}
}
]
}
url-loader
與file-loader用法一樣，url-loader將圖片檔案直接編碼成base64嵌入打包的代碼中
npm install url-loader -D
// webpack 5 默認有配置了file-loader 這里配置完會打包出兩個圖片檔案
{
test: /\.(jpe?g|png|gif|svg)$/i, // 匹配圖片檔案
use: [
{
loader: 'url-loader',
options: {
name:'[name]_[hash:6].[ext]',
outputPath:'images/',
limit: 100*1024 // 設定限制 小于100kb的檔案 轉成base64
}
}
]
}
asset module type
-
asset/resource發送一個單獨的檔案并匯出URL，之前通過使用file-loader實作；
-
assets/inline匯出一個資源的data URL，之前通過使用url-loader實作；
-
asset/source匯出資源的源代碼，之前通過使用raw-loader實作；
-
asset 在匯出一個data URL和發送一個單獨的檔案之間自動選擇，之前通過使用url-loader,并且配置資源體積限制實作；
asset type
// webpack5 最新用法 設定type 無需使用file-loader url-loader
// asset module type 替代 file-loader url-loader
{
test:/\.(jpe?g|png|gif|svg)$/,
type: 'asset', // 可選值 'asset/resource'、''
generator: {
filename: 'image/[name]_[hash:6][ext]' // 生成的檔案位置和名稱 此處[ext]前無需加'.'
},
parser: {
dataUrlCondition: {
maxSize:100*1024, // 設定限制 低于100kb生成base64 類似url-loader
}
}
}
asset/resource type
// webpack5 最新用法 設定type 無需使用file-loader url-loader
// asset module type 替代 file-loader url-loader
{
test:/\.(jpe?g|png|gif|svg)$/,
type: 'asset', // 可選值 'asset/resource'、''
generator: {
filename: 'image/[name]_[hash:6][ext]' // 生成的檔案位置和名稱 此處[ext]前無需加'.'
},
parser: {
dataUrlCondition: {
maxSize:100*1024, // 設定限制 低于100kb生成base64 類似url-loader
}
}
}
Plugin
clean-webpack-plugin
// A webpack plugin to remove/clean your build folder(s).
npm install clean-webpack-plugin -D
html-webpack-plugin
npm install html-webpack-plugin -D
copy-webpack-plugin
拷貝檔案
npm install html-webpack-plugin -D
// 插件
plugins: [
new CleanWebpackPlugin(), // A webpack plugin to remove/clean your build folder(s).
new HtmlWebpackPlugin({
title: '我自定義的模板',
template: './public/index.html', // 使用自定義的html模板打包
filename: 'index.html' // 打包后的html名
}),
new DefinePlugin({}),
new CopyWebpackPlugin({
patterns: [ // 匹配
{
from: 'public', // 將public中的檔案復制到打包的build目錄下
// to: './',
globOptions:{
ignore:[ // 忽略
'**/index.html'
]
}
},
]
})
],
mode配置
mode: 'development', //set mode,two options 'development'、'production'
devetool
devtool: 'source-map', // 'source-map' 'eval' and so on 設定source-map 建立js映射檔案，方便除錯源代碼和錯誤
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292512.html
標籤：其他