webpackd的作用:webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具将各种类型资源打包编译为最基础的html、js、css、img等
安装:
npm init -y 创建npm项目 npm install webpack webpack-cli --save-dev 安装webpack以及脚手架
默认配置
原始目录
index.html
<script src="./src/index.js"></script>
src/index.js
webpack目录
src/index.js
引入外部模块
utils/createButton.js
dist/index.html
<script src="./main.js"></script>
webpack操作
npx webpack
npx可以用于本地项目安装的指令工具
会在package.json同级目录编译生成dist文件夹 存放编译好的main.js
配置需要的文件
package.json同级目录新建webpack.config.js
基本配置
入口
entry
"./src/index.js"
出口
output
filename
"main.js"
path
const path=require("path")
path.resolve(__dirname, "dist")
clean:true
自动清理历史残留
解析路径
resolve
配置:resolve:{
alias:{"@":path.resolve(__dirname, "src")
}
}
导入:import { createButton } from "@/utils/createbutton"
;
npm 自定义指令
npm run build
npm webpack
资源加载
webpack默认只能加载js和json资源
其他资源类型(img/css/vue)需要安装加载器loader
css
src/assets/css/main.css
导入
import "@/assets/css/main.css"
错误描述
You may need an appropriate loader to handle this file type
你需要一个加载器
安装
npm install --save-dev style-loader css-loader
编写规则: module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader
image
src/assets/img/smallyellow.gif
导入
import smallyellow from "@/assets/img/smallyellow.gif"
错误描述
You may need an appropriate loader to handle this file type
你需要一个加载器
webpack 5 中,可以使用内置的 Asset Modules
编写规则: {
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
加载: let img = document.createElement("img");
img.src = smallyellow;
document.body.appendChild(img);
let div = document.createElement("div");
div.style.width = "400px";
div.style.height = "227px";
div.style.backgroundImage = `url(${smallyellow})`;
document.body.appendChild(div);
加载字体
src/assets/font/iconfont.css
src/assets/font/iconfont.ttf
webpack 5 中,可以使用内置的 Asset Modules
加载:let cat = document.createElement("span");
cat.innerText="分类";
cat.classList.add("iconfont", "icon-ico-category")
document.body.appendChild(cat);
加载数据
json
默认支持
csv
npm install --save-dev csv-loader
配置: {
test: /\.(csv|tsv)$/i,
use: ['csv-loader'],
},
xml
npm install --save-dev xml-loader
配置: {
test: /\.xml$/i,
use: ['xml-loader'],
},
less
src/assets/css/header.less
导入
import "@/css/header.less"
安装
npm install less less-loader --save-dev
编写规则:{test: /\.less$/i,use: [ // compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
插件用法
HtmlWebpackPlugin
html5自动生成并引入bundle包
安装
npm install --save-dev html-webpack-plugin
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin()],
MiniCssExtractPlugin
将css从js中剥离
减少js文件大小
安装
npm install --save-dev mini-css-extract-plugin
配置
plugins: [new MiniCssExtractPlugin()],
use: [MiniCssExtractPlugin.loader, "css-loader"],
CssMinimizerWebpackPlugin
将css压缩
安装
npm install css-minimizer-webpack-plugin --save-dev
配置: optimization:{minimizer: [new CssMinimizerPlugin(),
],
},
TerserWebpackPlugin
webpack5 自带不需要安装
将html压缩
配置
const TerserPlugin = require("terser-webpack-plugin");
优化器配置: optimization: {minimize: true, minimizer: [newTerserPlugin()],
},
代码分割
将js文件拆分为多个,以便按需加载
多个js被同时打包
新建/src/components/header.js
console.log("header入口"
);
index.js引入
import "@/components/header.js"
console.log("header入口"
);
多入口与多出口
配置多个入口文件: entry:{index:"@/index.js",
header:"@/components/header.js"
},
每个入口文件都会被自动引入index.html
在index.js中不需要在引入header.js
配置多个出口文件: output:{filename:"[name].bundle.js",
path:path.resolve(__dirname, 'dist'),
clean:true
},
重复导入
修改header.js:console.log("header入口");
import { createButton } from "@/utils/createbutton";
createButton("header按钮",()=>{
console.log("点击了header按钮"
);
})
此时工具模块createButton被同时打包到了index.bundle.js和header.bundle.js
解决方案
将createButton作为一个单独模块
header.js与index.js依赖createButton
重新配置入口文件: entry:{ index:{ import:"@/index.js",
dependOn:["createbutton"]
},
header:{
import:"@/components/header.js",
dependOn:["createbutton"
]
},
createbutton:{
import:"@/utils/createbutton.js"
}
},
动态导入
去除header.js的入口配置: entry:{ index:{
import:"@/index.js",
dependOn:["createbutton"
]
},
// header:{
// import:"@/components/header.js",
// dependOn:["createbutton"]
// },
createbutton:{
import:"@/utils/createbutton.js"
}
},
点击首页按钮时创建header
bundle分析
分析输出结果来检查模块在何处结束
webpack-chart
https://alexkuz.github.io/webpack-chart/
创建生成分析文件指令
"profile": "webpack --profile --json > stats.json"
npm run profile
用页面打开stats.json
开发环境
- 开发环境
mode:“development” - source map
代码映射
devtool: ‘inline-source-map’, - 开发工具
webpack-dev-server
npm install --save-dev webpack-dev-server
devDerver: devServer:{open:true,host:“192.168.0.10”,port:9090}
使用webpack搭建vue脚手架
1. 新建文件夹 webpack-vue
2.初始化npm项目
npm init -y
3.安装webpack工具
npm install webpack webpack-cli --save-dev
4.安装devServer
npm install --save-dev webpack-dev-server
5.添加运行指令: "build": "webpack --mode production","serve": "webpack serve --mode development"
6.根目录新建入口文件
src/main.js console.log("项目入口");
7.wepack配置文件
webpack.config.js
const path = require("path")
module.exports={
entry:"./src/main.js",
output:{ filename:"[name].bundle.js",
path:path.resolve(__dirname, "dist")
}
}
8.新建html页面加载bundle
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./main.bundle.js"></script>
</body>
</html>
9.安装vue
安装版本
npm install vue
10.加载vue文件
main.js :console.log("项目入口");
import { createApp } from "vue"
import App from "./App.vue"
createApp(App).mount("#app")
App.vue
<template>
<div @click="count++">
App: <span >{{count}}</span>
</div>
</template>
<script>
export default{
data(){
return{ count:10 }
}
}
</script>
安装
npm install -D vue-loader
修改配置
const {VueLoaderPlugin} = require("vue-loader")
{ test: /\.vue$/i, use: 'vue-loader' }
new VueLoaderPlugin()
加载less与css
css
11.vue-router使用
安装
npm install vue-router
页面修改
App.vue:
/src/views/HomeView.vue
/src/views/AboutView.vue
新建/src/router/index.js
main.js引入
12.在根目录新建public/index.html
安装
npm install --save-dev html-webpack-plugin
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html"
})
]