目录
什么是webpack
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。chunk 代码块，bundle静态资源。
为什么使用webpack
使用高级语法 ES6和 commentJS，进行 前端 模块化开发，但是浏览器识别不了，便使用webpack打包工具将高阶语法打包，变成浏览器可以识别的语法。
webpack五大核心概念
1.entry(入口）
指示webpack从哪个文件开始打包
2.output(输出）
指示webpack打包完的文件输出到哪里去，如何命名等
3.loader（加载器）
webpack本身智能处理js、json等资源，其他资源需要借助loader，webpack才能解析，常用的有css-loader、style-loader
4.plugins(插件）
扩展webpack的功能
5.mode(模式)
开发模式：development
生产模式：production
五大核心通常在webpack.config.js中配置，例如：
module.exports={
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,"../dist"),
},
module:{
rules:[
{
test:/\.css$/,
use: [
"style-loader",
"css-loader",
]
},
}
]
},
plugins:[
],
//模式
mode:"development",
};资源处理
webpack对css资源的处理
目的：将css打包程单独的文件，修改为link引入，杜绝闪屏现象发生。
步骤：
①下载包 ：npm i --save-dev mini-css-extract-plugin
②webpack.config.js中引入（在配置规则上面编写）
const MiniCssExtractPlugin = require("mini-css-extract-plugin");③在plugins里配置
plugins:[ // 生产模式下plugin的配置 new MiniCssExtractPlugin({ filename:"static/css/main.css", }), ],plugins:[ // 开发模式下plugin的配置 new MiniCssExtractPlugin(), ],④css兼容性处理，对于不同的浏览器要做兼容性处理
安装包 npm i postcss-loader postcss postcss-preset-env -D
配置webpack.config.js，写在css-loader后面，less-loader前面
{ test:/\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", { loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ "postcss-preset-env",//能解决大多数样式兼容性问题 ], }, }, }, ] },在package.json末尾配置兼容规则
"browserslist":[ "last 2 version", "> 1%", "not dead" ]⑤css压缩处理
下载包 npm i css-minimizer-webpack-plugin -D
在webpage.config.js中引入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");plugins:[ // plugin的配置 new CssMinimizerPlugin(), ],
webpack5对图片资源的处理
只需要修改webpack.config.js中的rules,添加一个规则
{
test:/\.(png|jpe?g|jif|webp|svg)$/,//webpack5处理图片资源配置
type:"asset",
parser:{
dataUrlCondition:{
//小于10kb的图片转base64
//优点：减少请求数量，缺点：体积会更大
maxSize:10*1024,
}
}
}webpack5对html资源的处理
①下载包 npm i --save-dev html-webpack-plugin
②在webpack.config.js引入
const HtmlWebpackPlugin = require("html-webpack-plugin");③在plugins中配置
plugins:[ new HtmlWebpackPlugin({ //模板，以public/index.html文件创建新的HTML文件 //新的HTML文件特点：1结构和原来一致 2自动引入打包输出的资源 template:path.resolve(__dirname,"public/index.html"), }) ], ],
webpack5对字体图标资源及其他资源处理
①下载字体图标文件
②按fontclass方式下载解压
③将字体图标css和图标文件复制到对应目录下
④修改webpack.config.is文件
{ test: /\.(ttf|woff2?)$/, type:"asset/resource", generator:{ filename:"static/media/[hash:10][ext][query]" } }⑤在main.js中引用、
import "./css/iconfont.css";⑥在HTML中使用
<span class="iconfont icon-money-circle"></span> <span class="iconfont icon-move"></span> <span class="iconfont icon-next"></span> <span class="iconfont icon-mobile-vibrate"></span>⑦处理其他资源，如果一些资源希望原封不动的输出出去，就直接配置webpack.config.js
{ test: /\.(ttf|woff2?|map3|map4|avi)$/, type:"asset/resource", generator:{ //输出图片名称 filename:"static/media/[hash:10][ext][query]" } }
webpack5修改输出文件目录
目的：webpack打包后，对文件进行分类，js文件全部打包在js文件夹目录下，图片打包在图片目录，所有相应资源打包在相应目录。
①修改js文件打包到js文件夹下，方式：在main.js前加上相应目录
output:{ path:path.resolve(__dirname,"dist"),//绝对路径 //入口文件打包输出的文件名 filename:"static/js/main.js"//在main.js前加上目录 //自动清空上次打包内容 clean:true, },②修改输出图片目录，方式：在rules规则实例添加generator
{ test: /\.(png|webp|jpe?g|gif|svg)$/, type:"asset", parser:{ dataUrlCondition:{ maxSize:10*1024 } }, generator:{ //名称只保留hash值前10位 filename:"static/images/[hash:10][ext][query]" } },结果如下
ESLint的使用
ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格）。
①下载包 npm install eslint eslint-webpack-plugin --save-dev
②webconfig.js引入
const ESLintPlugin = require("eslint-webpack-plugin");③plugins配置
plugins:[ new ESLintPlugin({ context:path.resolve(__dirname,"src"), }) ],④在根目录添加文件.eslintrc.js并配置
module.exports={ //继承Eslint规则 extends:["eslint:recommended"], env:{ node:true,//启用node中全局变量 browser:true,//启用浏览器中全部变量 }, parserOptions:{ ecmaVersion:6, sourceType:"module", }, rules:{ "no-var":2,//不能使用var定义变量 } }⑤开启缓存
new ESLintPlugin({ context:path.resolve(__dirname,"../src"), cache:true,//开启缓存 cacheLocation:path.resolve(__dirname,"../node_modules/") }),
Babel的使用
Babel是一个JavaScript编译器
主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中
①下载包：npm install -D babel-loader @babel/core @babel/preset-env webpack
②配置webpack.config.js
{ test: /\.js$/, exclude: /node_modules/,//排除node_modules中的js文件（这些文件不处理） use:{ loader:"babel-loader", cacheDirectory:true,//开启babel缓存 cacheCompression:false,//关闭缓存文件压缩 } }③根目录新建babel.config.js文件并配置
module.exports={ presets:["@babel/preset-env"], }
生产和开发服务器搭建
配置自动化
①下载包：npm i webpack-dev-server -D
②配置webpack.config.js
//开发服务器 devServer:{ host:"localhost",//启动服务器域名 port:"3000",//启动服务器端口号 open:true,//是否自动大家浏览器 },打包时使用npx webpack serve命令即可实现自动化
开发模式和生产模式配置
①在根目录新建文件夹config,分别建立webpack.dev.js和webpack.prod.js
②开发模式配置代码webpack.dev.js
const path = require("path"); const ESLintPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports={ entry:"./src/main.js", output:{ //开发模式没有输出，不用配置路径 path:undefined, filename:"static/main.js", //自动清空上次打包内容 clean:true, }, module:{ rules:[ { test:/\.css$/, use: [ "style-loader", "css-loader" ] }, { test: /\.(png|webp|jpe?g|gif|svg)$/, type:"asset", parser:{ dataUrlCondition:{ maxSize:10*1024 } }, generator:{ filename:"static/images/[hash:10][ext][query]" } }, { test: /\.(ttf|woff2?|map3|map4|avi)$/, type:"asset/resource", generator:{ filename:"static/media/[hash:10][ext][query]" } }, { test: /\.js$/, exclude: /node_modules/,//排除node_modules中的js文件（这些文件不处理） use:{ loader:"babel-loader", // options:{ // presets:["@babel/preset-env"], // } }, generator:{ filename:"static/media/[hash:10][ext][query]" } } ] }, plugins:[ // plugin的配置 new ESLintPlugin({ context:path.resolve(__dirname,"../src"), }), new HtmlWebpackPlugin({ //模板，以public/index.html文件创建新的HTML文件 //新的HTML文件特点：1结构和原来一致 2自动引入打包输出的资源 template:path.resolve(__dirname,"../public/index.html"), }) ], //开发服务器 devServer:{ host:"localhost",//启动服务器域名 port:"3000",//启动服务器端口号 open:true,//是否自动大家浏览器 }, //模式 mode:"development", };③生产模式配置webpack.prod.js代码
const path = require("path"); const ESLintPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports={ entry:"./src/main.js", output:{ path:path.resolve(__dirname,"../dist"), filename:"static/main.js", //自动清空上次打包内容 clean:true, }, module:{ rules:[ { test:/\.css$/, use: [ "style-loader", "css-loader" ] }, { test: /\.(png|webp|jpe?g|gif|svg)$/, type:"asset", parser:{ dataUrlCondition:{ maxSize:10*1024 } }, generator:{ filename:"static/images/[hash:10][ext][query]" } }, { test: /\.(ttf|woff2?|map3|map4|avi)$/, type:"asset/resource", generator:{ filename:"static/media/[hash:10][ext][query]" } }, { test: /\.js$/, exclude: /node_modules/,//排除node_modules中的js文件（这些文件不处理） use:{ loader:"babel-loader", // options:{ // presets:["@babel/preset-env"], // } }, generator:{ filename:"static/media/[hash:10][ext][query]" } } ] }, plugins:[ // plugin的配置 new ESLintPlugin({ context:path.resolve(__dirname,"../src"), }), new HtmlWebpackPlugin({ //模板，以public/index.html文件创建新的HTML文件 //新的HTML文件特点：1结构和原来一致 2自动引入打包输出的资源 template:path.resolve(__dirname,"../public/index.html"), }) ], //开发服务器 devServer:{ host:"localhost",//启动服务器域名 port:"3000",//启动服务器端口号 open:true,//是否自动大家浏览器 }, //模式 mode:"production", };配置package.json
"scripts": { "start":"npm run dev", "dev":"webpack server --config ./config/webpack.dev.js", "build":"webpack --config ./config/webpack.prod.js" },运行生产模式时：npm run build
运行开发模式时：npm run dev
2127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
