本文章是根据尚硅谷2022版视频整理的笔记,有错误请指正。
1.基本配置
首先创建好自己的项目,打开项目根目录终端,首先进行初始化
npm init -y
此时会生成package.json,注意package.json中的name不能叫做package,否则会报错
下载依赖
npm i webpack webpack-cli -D
在项目根目录下新建文件 webpack.config.js
const path = require("path") //nodejs核心模块,专门用来处理路径问题
module.exports ={
//入口 从哪个文件作为打包入口,写相对路径和绝对路径都行
entry:'./src/main.js',
//输出
output:[
//打包路径 绝对路径 __dirname是node.js的变量,代表当前文件的文件夹目录
path:path.resolve(__dirname,"dist"),
//输出文件名
filename:'main.js'
],
//加载器
module:[
rules:[
]
],
//插件
plugins:[],
//模式 development 为开发模式
mode:'development'
}
启用webpack
npx webpack
此时webpack会将文件打包输出到dist目录下
2.处理样式资源
下载css、less、sass、stylus各自对应的包
//css
npm i css-loader style-loader -D
//less
npm i less-loader -D
//sass
npm i sass-loader sass -D
//stylus
npm i stylus-loader -D
在webpack.config.js文件里的module进行配置
module:[
rules:[
//css 注意这里没有引号!
{
test:/\.css$/,
use:["style-loader","css-loader"]
},
//less
{
test:/\.less$/,
use:["style-loader","css-loader","less-loader"]
},
//sass或scss
{
test:/\.s[ac]ss$/,
use:["style-loader","css-loader","sass-loader"]
},
//styl
{
test:/\.styl$/,
use:["style-loader","css-loader","stylus-loader"]
},
]
],
在main.js里(入口文件)引入各样式资源文件,否则webpack不打包
import "./css/index.css"
import "./less/index.less"
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";
记得在html页面引入打包后的js文件才能看到效果
<script src="../dist/main.js"></script>
3.处理图片资源
在webpack.config.js中的module的rules里继续配置
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
代码中的parser部分是对图片资源进行了优化,将小于某个大小的图片转化成了data URL 的形式
图片资源优化的优点是可以减少请求的数量,缺点是打包体积变得更大
4、修改输出资源的名称和路径
//js文件
output:{
filename:'static/js/main.js'
}
//图片
module:[
rules:[
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
},
},
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
},
},
]
]
上述代码中将js文件都打包到static/js的目录下,在generator中将图片资源打包到static/imgs目录下
5.自动清空上次打包资源
在output中添加clean:true,就能够将新的打包覆盖上一次的打包资源
output:{
filename:'static/js/main.js',
clean:true
}
6.处理iconfont等其他资源
记得先在main.js和index.html里引用iconfont,否则webpack不打包
{
test:/\.(ttf|woff2?|map4|map3|avi)$/,
type:"asset/resource,
generator:{
filename:"static/media/[hash][ext][query]
}
}
type:"asset/resource" 和 type:"asset" 的区别
type:"asset/resource" 相当于file-loader,将文件转化成webpack能识别的资源
type:"asset" 相当于url-loader,将文件转化成webpack能识别的资源,同时小于某个大小的资源会处理成data URL形式
7.JS资源的兼容性处理
(1)Eslint:用来检测js和jsx语法的工具,可以配置各项功能
使用Eslint主要是配置Eslint文件,里面写上rules规则,之后就会以这个规则对代码进行检查
首先下载依赖
npm i eslint-webpack-plugin eslint -D
可以在根目录下创建.eslintrc.js文件,或者在package.json里的eslintConfig修改,也可以下载Eslint插件,此时项目所有的文件都默认进行Eslint检查,因此可以在项目根目录下新建.eslintignore文件来忽略打包后的文件
# 忽略dist目录下所有文件
dist
以.eslintrc.js为例
module.exports = {
//继承Eslint规则
extends:["eslint:recommend"],
//环境变量
env:{
node:true, //启用node全局变量
browser:true, //启用浏览器中全局变量
}
// 解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目,就需要开启 jsx 语法
}
},
// 具体检查规则
rules: {
"no-var":2, //不能使用var定义变量
},
// ...
// 其他规则详见:https://eslint.bootcss.com/docs/user-guide/configuring
};
在webpack.config.js中也需要进行配置
//首先导入
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
//在plugins中进行配置
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
(2)Babel:将ES6语法编写的代码转换成向后兼容的JavaScript语法
配置文件,在项目根目录下新建babel.config.js,或者在package.json中的babel修改
先下载依赖
npm i babel-loader @babel/core @babel/preset-env -D
以babel.config.js配置文件为例
module.exports={
//预设 一组Babel插件,扩展Babel功能
presets:["@babel/preset-env"],
}
@babel/preset-env:智能预设,允许使用最新的JavaScript
@babel/preset-react:用来编译React jsx语法的预设
@babel/preset-typescript:用来编译TypeScript语法的预设
修改webpack.config.js配置文件
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
8.开发服务器与自动化
监听src下面的目录文件,一旦改变就自动重新打包
下载依赖
npm i webpack-dev-server -D
在webpack.config.js里的plugins与mode之间添加
devSever:{
host:"localhost",
port:"8001",
open:true, //是否自动打开浏览器
}
此时运行指令为
npx webpack serve
9.提取css成单独文件
预防闪屏现象
下载依赖
npm i mini-css-extract-plugin -D
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins:{
new MiniCssExtractPlugin({
filename:"static/css/main.css"
})
}
同时把module里所有的“style-loader”替换成MiniCssExtractPlugin.loader (注意后面没有双引号)
module:[
rules:[
//css 注意这里没有引号!
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,"css-loader"]
},
//less
{
test:/\.less$/,
use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
},
//sass或scss
{
test:/\.s[ac]ss$/,
use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
},
//styl
{
test:/\.styl$/,
use:[MiniCssExtractPlugin.loader,"css-loader","stylus-loader"]
},
]
],