webpack基础
webpack 处理css兼容问题
下载loader 引入 package.json修改
- postcss-loader 可以处理css兼容问题 需要在css-loader 之后——其他cssloader 之前 引入
- package.json 添加数组 browserlist:[“ie>=8”,“>1%”,“not dead”] 百分之99 还存在的浏览器 大于等于ie8
webpack 处理css闪屏问题
MiniCssExtractPlugin 使用插件的loader
将css文件以单文件link方式引入 避免出现闪屏现象
- 不使用style-loader
- 使用MiniCssExtractPlugin.loader
webpack 优化压缩css代码
CssMinimizerWebpackPlugin
- 下载安装 引入webpack 配置文件 直接在plugin中new CssMinimizerWebpackPlugin()
- 提示:默认生产环境下 js html 会自动压缩不需要额外的配置
总结
webpack 两种开发模式
- 开发模式:代码能编译自动化运行 devServer 不用输出
- 生产模式:代码编译优化输出
webpack 基本的功能
- 开发模式:可以编译 es module 语法
- 生产模式:可以编译 es module 语法 压缩js代码
webpack配置 5概念+devServer
entry、output、loader、plugins、mode 、devServer
生产环境webpack配置实例
const path = require("path"); //node.js核心模块,专门用来处理路径问题
const os = require("os"); // Node.js的os模块是一个内置模块,用于提供与操作系统相关的功能。
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css文件以单文件link方式引入 避免出现闪屏现象
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //css压缩
const TerserWebpackPlugin = require("terser-webpack-plugin"); //js压缩
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"); //图片压缩
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin"); //预加载当前页的资源
const threads = os.cpus().length;
function getStyleLoader(pre) {
return [
// 将 JS 字符串生成为 style 节点
//"style-loader",
//不使用style-loader 下面的这个会生成单个css文件 link引入 避免出现闪屏现象
MiniCssExtractPlugin.loader,
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// postcss-loader 能解决大部分css兼容问题
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// 其他选项
},
],
],
},
},
},
pre,
].filter(Boolean);
//filter 过滤掉undefined null 等返回false的数组元素
}
//启动命令 npx webpack --config ./config/webpack.prod.js
// 生产模式 不需要devServer
module.exports = {
// 入口
entry: "./src/main.js", //相对路径
// 输出
output: {
// 文件的输出路径
// __dirname node.js的变量,代表当前文件的文件夹目录
path: path.resolve(__dirname, "../dist"), // 绝对路径
// 入口文件打包的文件名
// filename: "js/main.js", 下面的命名方式,兼容多入口
filename: "js/[name].js",
// 图片、字体等通过type:asset处理资源命名 可以统一定义在此处,下面就不用写了
//assetModuleFilename:"media/[hash][ext][query]"
// code split给打包输出的其他名字命名
chunkFilename: "js/[name].chunk.js",
clean: true, //自动清理上次打包的内容
},
//加载器
module: {
rules: [
// loader的配置
{
oneOf: