創(chuàng)建局部的webpack
-
創(chuàng)建package.json文件，用于管理項(xiàng)目的信息、庫(kù)依賴等
npm initn 第三步：使用局部的webpack n 第四步：在package.json中創(chuàng)建scripts腳本，執(zhí)行腳本打包即可 創(chuàng)建局部的webpack npm init npm install webpack webpack-cli -D npx webpack npm run build
安裝局部的webpack
npm install webpack webpack-cli -D使用局部的webpack
npx webpack-
在package.json中創(chuàng)建scripts腳本违崇，執(zhí)行腳本打包即可
"scripts": { //基本配置 "build": "webpack" //可指定配置文件土辩，即（webpack.config.js） "build": "webpack --config webpack.config.js" },
常用配置
const path = require('path');
// 刪除dist文件夾：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 進(jìn)行項(xiàng)目部署的時(shí)遭赂，必然也是需要有對(duì)應(yīng)的入口文件index.html潜索；
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')
// 如果我們將一些文件放到public的目錄下臭增，那么這個(gè)目錄會(huì)被復(fù)制到dist文件夾中。
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
// p可選值有：'none' | 'development' | 'production'帮辟；
mode: 'development',
// 設(shè)置source-map, 建立js映射文件, 方便調(diào)試代碼和錯(cuò)誤
devtool: "source-map",
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "./build"),
filename: "build.js"
},
devServer: {
contentBase: "./public",
// 模塊熱替換是指在 應(yīng)用程序運(yùn)行過程中速址，替換、添加由驹、刪除模塊，而無需重新刷新整個(gè)頁(yè)面昔园；
hot: true,
// localhost：本質(zhì)上是一個(gè)域名蔓榄，通常情況下會(huì)被解析成127.0.0.1;
// 0.0.0.0：監(jiān)聽I(yíng)PV4上所有的地址，再根據(jù)端口找到不同的應(yīng)用程序;
// 比如我們監(jiān)聽 0.0.0.0時(shí)默刚，在同一個(gè)網(wǎng)段下的主機(jī)中甥郑，通過ip地址是可以訪問的;
host: "0.0.0.0",
port: 7777,
// open是否打開瀏覽器：
open: true,
// compress是否為靜態(tài)文件開啟gzip compression,默認(rèn)值是false
compress: true,
// proxy: {
// "/api": {
// // 表示的是代理到的目標(biāo)地址
// target: "http://localhost:8888",
// // 默認(rèn)情況下，我們的 /api-hy 也會(huì)被寫入到URL中荤西，如果希望刪除澜搅，可以使用pathRewrite
// pathRewrite: {
// "^/api": ""
// },
// // 默認(rèn)情況下不接收轉(zhuǎn)發(fā)到https的服務(wù)器上，如果希望支持邪锌，可以設(shè)置為false勉躺；
// secure: false,
// // ：它表示是否更新代理后請(qǐng)求的headers中host地址
// changeOrigin: true
// }
// }
},
resolve: {
// extensions是解析到文件時(shí)自動(dòng)添加擴(kuò)展名(默認(rèn)值是 ['.wasm', '.mjs', '.js', '.json'])
extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
// 是配置別名alias：
alias: {
"@": path.resolve(__dirname, "./src"),
"js": path.resolve(__dirname, "./src/js")
}
},
// module.rules中允許我們配置多個(gè)loader
module: {
rules: [
{
// test屬性：用于對(duì) resource（資源）進(jìn)行匹配的，通常會(huì)設(shè)置成正則表達(dá)式
test: /\.(css|less)$/,
// 1.loader語(yǔ)法糖寫法
// loader: "css-loader"
// 2.完整的寫法
// 采用倒序加載使用loader(即從下往上)
use: [
"style-loader",
"css-loader",
"less-loader",
{
// 這個(gè)工具可以幫助我們進(jìn)行一些CSS的轉(zhuǎn)換和適配觅丰，比如自動(dòng)添加瀏覽器前綴饵溅、css樣式的重置
loader: "postcss-loader",
// 可選的屬性，值是一個(gè)字符串或者對(duì)象妇萄，值會(huì)被傳入到loader中蜕企；
options: {
postcssOptions: {
plugins: [
require("autoprefixer")
]
}
}
}
]
},
// {
// // 對(duì)字體進(jìn)行處理
// test: /\.(eot|ttf|woff2?)$/,
// use: {
// loader: 'file-loader',
// // [ext]： 處理文件的擴(kuò)展名；
// // [name]：處理文件的名稱
// // [hash]：文件的內(nèi)容冠句，使用MD4的散列函數(shù)處理轻掩，生成的一個(gè)128位的hash值（32個(gè)十六進(jìn)制）
// // p [path]：文件相對(duì)于webpack配置文件的路徑；
// options: {
// name: 'fong/[name]_hash[6][ext]'
// }
// }
// },
// {
// // 對(duì)圖片進(jìn)行處理
// test: /\.(jpe?g|png|gif|svg)$/,
// use: {
// loader: "url-loader",
// options: {
// // outputPath: "img",
// name: "img/[name]_[hash:6].[ext]",
// // limit懦底，可以用于設(shè)置轉(zhuǎn)換的限制唇牧；下面的代碼38kb的圖片會(huì)進(jìn)行base64編碼，而295kb的不會(huì)；
// limit: 100 * 1024
// }
// }
// },
// 在webpack5開始奋构，我們可以直接使用資源模塊類型（asset module type）壳影，來替代上面的這些loader
// 資源模塊類型(asset module type)，通過添加 4 種新的模塊類型弥臼，來替換所有這些 loader
// 1.asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL宴咧。之前通過使用 file-loader 實(shí)現(xiàn)；
// 2.asset/inline 導(dǎo)出一個(gè)資源的 data URI径缅。之前通過使用 url-loader 實(shí)現(xiàn)掺栅；
// 3.asset/source 導(dǎo)出資源的源代碼。之前通過使用 raw-loader 實(shí)現(xiàn)纳猪；
// 4.asset 在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇氧卧。之前通過使用 url-loader，并且配置資源體積限制實(shí)現(xiàn)
{
// 對(duì)圖片進(jìn)行處理
test: /\.(jpe?g|png|gif|svg)$/,
type: 'asset',
generator: {
filename: "img/[name]_[hash:6].[ext]",
// 添加一個(gè)parser屬性氏堤，并且制定dataUrl的條件沙绝，添加maxSize屬性；
// parser: {
// dataUrlCondition: {
// maxSize: 100 * 1024
// }
// }
}
},
{
// 對(duì)字體進(jìn)行處理
test: /\.(eot|ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "font/[name]_[hash:6][ext]",
// limit: 100 * 1024
}
},
{
test: /\.js$/,
loader: "babel-loader"
}
]
},
// Loader是用于特定的模塊類型進(jìn)行轉(zhuǎn)換鼠锈；
// Plugin可以用于執(zhí)行更加廣泛的任務(wù)闪檬，比如打包優(yōu)化、資源管理购笆、環(huán)境變量注入等粗悯；
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// title：在進(jìn)行htmlWebpackPlugin.options.title讀取時(shí)，就會(huì)讀到該信息
title: 'webpack案例',
// template：指定我們要使用的模塊所在的路徑同欠；
template: './public/index.html'
}),
// DefinePlugin允許在編譯時(shí)創(chuàng)建配置的全局常量样傍，是一個(gè)webpack內(nèi)置的插件（不需要單獨(dú)安裝)
new DefinePlugin({
BASE_URL: "'./'"
}),
new CopyWebpackPlugin({
// 復(fù)制的規(guī)則在patterns中設(shè)置；
// from：設(shè)置從哪一個(gè)源中開始復(fù)制铺遂；
// to：復(fù)制到的位置衫哥，可以省略，會(huì)默認(rèn)復(fù)制到打包的目錄下娃循；
// globOptions：設(shè)置一些額外的選項(xiàng)炕檩，其中可以編寫需要忽略的文件：
// .DS_Store：mac目錄下回自動(dòng)生成的一個(gè)文件；
// index.html：也不需要復(fù)制捌斧，因?yàn)槲覀円呀?jīng)通過HtmlWebpackPlugin完成了index.html的生成笛质；
patterns: [
{
from: 'public',
globOptions: {
ignore: [
'**/.DS_Store',
'**/index.html',
]
}
}
]
})
]
}
