webpack快速开始
Webpack 快速开始
参考文档：
官方文档：https://webpack.docschina.org/concepts/
尚硅谷教程文档：https://yk2012.github.io/sgg_webpack5/
掘金👍：https://juejin.cn/post/7014466035923288072#heading-16
其他：https://learn-docs.github.io/learn-webpack/
博客园：https://blog.csdn.net/celester_best/article/details/121875997
简书：第五节:Webpack打包图片资源 - 简书 (jianshu.com)
初始化项目
新建一个空项目，执行如下操作
yarn init -y
yarn add webpack webpack-cli --D
开发模式下能编译es6的语法。
webpack 本身功能比较少，只能处理 js和json 文件，一旦遇到了css文件等其他文件就会报错。
五大核心概念
默认的配置文件： webpack.config.js
const path = require("path"); //nodejs核心模块，专门用来处理路径
module.exports = {
// 入口
entry:path.resolve(__dirname,"./src/main.js"), //要求绝对路径
// 输出
output:{
// 文件的输出路径 (__dirname代表当前文件的文件夹目录)
path:path.resolve(__dirname,"dist"), //要求绝对路径
filename:"main.js"
},
// 加载器
module:{
rules:{
// loader的配置
}
},
// 插件
plugins:[],
// 模式
mode:"development"
}
创建文件
在项目中创建 src 文件夹，里面创建下面这些文件
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
main.js
import "./css/style.css"
function sayHi(){
console.log(666)
}
sayHi()
let sayHello = ()=>{
console.log(777)
}
sayHello()
在css文件夹下创建style.css
body{
background-color: burlywood;
}
.box {
width: 200px;
height: 200px;
background-color: coral;
}
.box2{
height: 300px;
width: 500px;
background: url(../img/illustration_cover.png);
background-size: contain;
}
文件处理
CSS
加载css资源需要安装style-loader，css-loader库
rules:[
{
test:/\.css$/i,
//执行顺序从右到左
use:[MiniCssExtractPlugin.loader,'css-loader']
},
]
图片
方法一、使用webpack5内置的处理器代替 url-loader 和 file-loader
// 处理图片资源
// 默认只能处理CSS引入和JS引入的资源
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
generator: {
filename: "static/img/[name].[hash:7][ext]",
},
},
方法二:使用loader
module.exports = {
// ...
module:{
rules:[
{
test: /\.(jpg|png|gif)$/,
// 使用一个loader处理, 用loader配置
loader: "url-loader",
options:{
// 配置图片打包loader
// 图片大小低于8kb的会打包为base64格式,
// 超过的处理为文件格式
limit: 8 * 1024
// 给图片进行重命名
// [hash:8] 是取图片打包的hash名的前8位
// [ext] 取图片原来的文件扩展名
name: '[hash:8].[ext]'
}
}
]
},
// ...
}
// 上面的配置只能处理CSS或者less等样式文件中引入的图片
// 默认不能处理html通过img标签引入的图片, 如果需要处理 img标签引入的图片需要使用其他的loader
webpack几大注意事项
1、CSS-loader
css-loader只能处理通过JS引入的css文件。
2、devserver的配置
output生成的html文件最好别改名，index即可，不然开启开发服务器后会找不到文件，显示404。
3、loader的使用顺序
loader的使用顺序是从右到左，所以在配置的时候应该注意这一点。
4、loader的正则表达式的含义
i表示不区分大小写，$匹配你要用来查找的字符串结尾
webpack配置文件示例
// npx webpack --config ./config/webpack.prod.js
const path = require('path'); //nodejs核心模块，专门用来处理路径
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 入口
entry: './src/main.js', //要求相对路径
// 输出
output: {
// 文件的输出路径 (__dirname代表当前文件的文件夹目录)
path: path.resolve(__dirname, '../dist'), //要求绝对路径
filename: 'static/js/main.js', //入口文件打包输出文件名
clean: true, // 在打包前清空path目录
},
// 加载器
module: {
rules: [
{
// 每一个文件只被一个loader配置处理
oneOf: [
// 处理CSS
{
test: /\.css$/i, //只检测css文件
use: ['style-loader', 'css-loader'], //执行顺序从右到左
},
// 处理Less
{
test: /\.less$/i,
// loader只能使用一个loader,而use可以一次使用多个loader
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
// 处理图片类型
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset', // 图片转base64这里需要配置asset
parser: {
dataUrlCondition: {
// 小于20kb会转base64
// 有点减少请求数量
maxSize: 20 * 1024,
},
},
generator: {
// 输出图片名称,hash生成一个唯一的id,ext文件拓展名,query链接携带的参数
filename: 'static/images/[hash:8][ext][query]',
},
},
// 处理字体类型
{
test: /\.ttf/,
type: 'asset/resource', // 图片转base64这里需要配置asset
generator: {
// 输出图片名称,hash生成一个唯一的id,ext文件拓展名,query链接携带的参数
filename: 'static/fonts/[hash:8][ext][query]',
},
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //排除node_modules文件夹
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread'],
},
},
],
},
],
},
optimization: {
minimize: false,
// 压缩相关
minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
},
// 插件
plugins: [
new ESLintPlugin({
// 检测哪些文件
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',
cache: true,
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintCache'),
}),
new HtmlWebpackPlugin({
// 以public下的index.html为模板生成新的html
template: path.resolve(__dirname, '../public/index.html'),
}),
new MiniCssExtractPlugin({
filename: 'static/css/main.css',
}),
],
// 模式
mode: 'production',
devtool: 'source-map',
};
