webpack基本配置
webpack五大概念:
entry(入口):指示webpack从哪开始打包
output(输出):指示webpack打包输出到哪,打包文件如何命名
loader(加载器):可以借助loader来帮助webpack打包其他类型资源
pugins(插件):拓展webpack功能
mode(模式):webpack开发模式
- 开发模式:development
- 生产模式:production
创建webpack.config.js配置五大概念:
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");
module.exports={
entry:'./src/main.js'
output:{
// path: 文件输出目录,必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path:path.resolve.(__dirname,'dist')
},
module:{
rules:[]
},
pugins:[],
//开发模式
mode:'development'
}
处理样式资源
处理css
css-loader、style-loader
css-loader 把css处理成webpack可识别资源
style-loader 创建一个style标签,把处理好的css放入style标签中
安装
安装css-loader
、style-loader
npm i css-loader style-loader -D
在webpack.config.js中配置
module:{
rules:[
{
test:'/.css$/',
//ues执行顺序为从左到右依次执行
use:['style-loader','css-loader']
}
]
}
处理less
less-loader:把less资源转为css资源
安装less-loader
npm i less-loader -D
在webpack.config.js中配置
module:{
rules:[
{
test:'/.less$/',
//ues执行顺序为从左到右依次执行
use:['style-loader','css-loader','less-loader']
}
]
}
打包图片资源
配置
在webpack.config.js中配置
module:{
rules:[
{
test:'/.(png|jpg|gif)$/',
type:'asset'
}
]
}
优化打包图片
将小于某个大小的图片转化成 data URI 形式(Base64 格式)
module:{
rules:[
{
test:'/.(png|jpg|gif)$/',
type:'asset',
parser:{
dataURLcondition:{
maxSize:10*1024//图片小于10kb则打包成base64
}
}
}
]
}
修改打包资源的名称与路径
在webpack.config.js中配置
在module下rules中genrator中配置
module:{
rules:[
{
test:'/.(png|jpg|gif)$/',
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]",
}
}
]
}
自动清空上次打包资源
在webpack.config.js中配置
在output中配置clean
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js",
clean: true, // 自动将上次打包目录资源清空
},
处理字体图标文件
在webpack.config.js中配置
在module中配置
module:{
rulse:[
{
test:"/.ttf$/",
type:'asset/resource'
generator: {
filename: "static/media/[hash:8][ext][query]",
},
}
]
}
type: "asset/resource"和type: "asset"的区别:
type: "asset/resource"
相当于file-loader
, 将文件转化成 Webpack 能识别的资源,其他不做处理type: "asset"
相当于url-loader
, 将文件转化成 Webpack 能识别的资源,同时小于某个大小的资源会处理成 data URI 形式
处理其他资源
在webpack.config.js中配置
在module中配置
module:{
rules:[
{
test:'/.(mp3|mp4)$/',
type:'asset/resource',
generator:{
filename:'static/media/[hash:8][ext][query]'
}
},
]
}
处理js资源
ESlint :它是用来检测 js 和 jsx 语法的工具,可以配置各项功能,我们使用 Eslint,关键是写 Eslint 配置文件,里面写上各种 rules 规则,将来运行 Eslint 时就会以写的规则对代码进行检查
ESlint配置文件
在项目根目录下创建 .eslintrc.js
文件
在.eslintrc.js配置
module.exports = {
// 解析选项
parserOptions: {},
// 具体检查规则
rules: {},
// 继承其他规则
extends: [],
// ...
// 其他规则详见:https://eslint.bootcss.com/docs/user-guide/configuring
};
-
parserOptions 解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目,就需要开启 jsx 语法
}
}
- rules 具体规则
"off"
或0
- 关闭规则"warn"
或1
- 开启规则,使用警告级别的错误:warn
(不会导致程序退出)"error"
或2
- 开启规则,使用错误级别的错误:error
(当被触发的时候,程序会退出)
rules: {
semi: "error", // 禁止使用分号
'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句,否则警告
'default-case': [
'warn', // 要求 switch 语句中有 default 分支,否则警告
{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
],
eqeqeq: [
'warn', // 强制使用 === 和 !==,否则警告
'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
],
}
3.继承eslint
- extends 继承
开发中一点点写 rules 规则太费劲了,所以有更好的办法,继承现有的规则。
现有以下较为有名的规则:
- Eslint 官方的规则open in new window:
eslint:recommended
- Vue Cli 官方的规则open in new window:
plugin:vue/essential
- React Cli 官方的规则open in new window:
react-app
// 例如在React项目中,我们可以这样写配置
module.exports = {
extends: ["react-app"],
rules: {
// 我们的规则会覆盖掉react-app的规则
// 所以想要修改规则直接改就是了
eqeqeq: ["warn", "smart"],
},
};
在webpack中使用
1.下载包
npm i eslint-webpack-plugin eslint -D
2.定义eslint配置,在.eslintcr.js中配置
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
3.在webpack中配置
引入插件
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
在pugins中配置
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
babel
主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中
babel配置文件
babel配置文件在根目录下创建一个babel.config.js文件
配置内容
odule.exports = {
// 预设
presets: [],
};
presets 预设
简单理解:就是一组 Babel 插件, 扩展 Babel 功能
@babel/preset-env
: 一个智能预设,允许您使用最新的 JavaScript。@babel/preset-react
:一个用来编译 React jsx 语法的预设@babel/preset-typescript
:一个用来编译 TypeScript 语法的预设
在webpack中使用
下载包
npm i babel-loader @babel/core @babel/preset-env -D
定义babel配置文件
babel.config.js
odule.exports = {
// 预设
presets: ['@babel/preset-env'],
};
在webpack中配置
module:{
reles:[
{
test:/.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
}
]
}
处理HTML资源
下载包
npm i html-webpack-plugin -D
引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
在webpack中配置
pugins:[
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
]
修改index.html
把index.html引入的js文件给取消HtmlWebpackPlugin会自动帮忙引入
开发服务器&自动化
下载包
npm i webpack-dev-server -D
在webpack中配置
// 开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
运行
npx webpack serve
生产模式介绍
生产模式是开发完成代码后,我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化,让其运行性能更好。
优化主要从两个角度出发:
- 优化代码运行性能
- 优化代码打包速度
生产模式准备
准备两个配置文件来放置不同的配置文件
目录格式:
├── webpack-test (项目根目录)
├── config (Webpack配置文件目录)
│ ├── webpack.dev.js(开发模式配置文件)
│ └── webpack.prod.js(生产模式配置文件)
├── node_modules (下载包存放目录)
├── src (项目源码目录,除了html其他都在src里面)
│ └── 略
├── public (项目html文件)
│ └── index.html
├── .eslintrc.js(Eslint配置文件)
├── babel.config.js(Babel配置文件)
└── package.json (包的依赖管理配置文件)
配置开发模式的配置文件
- webpack.dev.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: undefined, // 开发模式没有输出,不需要指定输出目录
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
// clean: true, // 开发模式没有输出,不需要清空输出结果
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
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]",
},
},
{
test: /.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
// 其他省略
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
mode: "development",
};
运行
npx webpack --config ./config/webapck.dev.js
配置生产模式文件
- webpack.prod.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true,
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
{
test: /.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /.styl$/,
use: ["style-loader", "css-loader", "stylus-loader"],
},
{
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]",
},
},
{
test: /.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
// devServer: {
// host: "localhost", // 启动服务器域名
// port: "3000", // 启动服务器端口号
// open: true, // 是否自动打开浏览器
// },
mode: "production",
};
运行
npx webpack --config ./config/webpack.prod.js
配置运行指令
为了方便运行不同模式的指令,我们将指令定义在 package.json 中 scripts 里面
"scripts":{
start:'npm run dev',
dev:'npx webpack --config ./config/webpack.dev.js',
build:'npx webpack --config ./config/webpack.prod.js'
}
配置运行指令后,以后运行webpack指令
开发者模式:
npm start 或 npm run dev
生产则模式:
npm run build
css处理
提取css成单独文件
1.下载包
npm i mini-css-extract-plugin -D
2.配置文件
webpack.prod.js
//引入mini-css-extract-plugin插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
因为mini-cssextract-plugin会提取css文件就不需要在使用style-loader来创建style标签来插入css
所以需要把style-loader
替换成MiniCssExtractPlugin.loader
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
// 用来匹配 .less 结尾的文件
test: /.less$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [MiniCssExtractPlugin.loader, "css-loader",'less-loader'],
},
]
plugins:{
//添加mini-css-extract-plugin插件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
})
}
}
css兼容性处理
下载包
npm i postcss-loader postcss postcss-preset-env -D
配置
webpack.prod.js
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
],
},
{
// 用来匹配 .less 结尾的文件
test: /.less$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [
MiniCssExtractPlugin.loader,
"css-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
'less-loader'
],
},
]
plugins:{
//添加mini-css-extract-plugin插件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
})
}
}
控制兼容性
我们可以在 package.json
文件中添加 browserslist
来控制样式的兼容性做到什么程度。
{
// 其他省略
"browserslist": ["ie >= 8"]
}
想要知道更多的 browserslist
配置,查看browserslist 文档open in new window
以上为了测试兼容性所以设置兼容浏览器 ie8 以上。
实际开发中我们一般不考虑旧版本浏览器了,所以我们可以这样设置:
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
合并配置(封装重复代码)
在webpack.prod.js中配置
// 获取处理样式的Loaders(封装)
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
};
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
//使用封装好的getStyleLoaders
use: getStyleLoaders()
},
{
// 用来匹配 .less 结尾的文件
test: /.less$/,
// use 数组里面 Loader 执行顺序是从右到左
//使用封装好的getStyleLoaders
use: getStyleLoaders('less-loader')
},
]
plugins:{
//添加mini-css-extract-plugin插件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
})
}
}
webpack基础总结
本章节我们学会了 Webpack 基本使用,掌握了以下功能:
两种开发模式
- 开发模式(development):代码能编译自动化运行
- 生产模式(production):代码编译优化输出
Webpack 基本功能
- 开发模式:可以编译 ES Module 语法
- 生产模式:可以编译 ES Module 语法,压缩 js 代码
Webpack 配置文件
-
5 个核心概念
- entry
- output
- loader
- plugins
- mode
-
devServer 配置
Webpack 脚本指令用法
webpack
直接打包输出webpack serve
启动开发服务器,内存编译打包没有输出