webpack 处理css兼容问题

下载loader 引入 package.json修改

1. postcss-loader 可以处理css兼容问题 需要在css-loader 之后——其他cssloader 之前 引入
2. package.json 添加数组 browserlist:[“ie>=8”,“>1%”,“not dead”] 百分之99 还存在的浏览器 大于等于ie8

webpack 处理css闪屏问题

MiniCssExtractPlugin 使用插件的loader
将css文件以单文件link方式引入 避免出现闪屏现象

1. 不使用style-loader
2. 使用MiniCssExtractPlugin.loader

webpack 优化压缩css代码

CssMinimizerWebpackPlugin

1. 下载安装 引入webpack 配置文件 直接在plugin中new CssMinimizerWebpackPlugin()
2. 提示：默认生产环境下 js html 会自动压缩不需要额外的配置

总结

webpack 两种开发模式

1. 开发模式：代码能编译自动化运行 devServer 不用输出
2. 生产模式：代码编译优化输出

webpack 基本的功能

1. 开发模式：可以编译 es module 语法
2. 生产模式：可以编译 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: [// style-loader 将js中的css通过创建style标签添加html文件中生效// css-loader  将css资源编译成common.js的模块到js中{ test: /\.css$/, use: getStyleLoader() }, // use执行顺序 从右到左、从下到上{ test: /\.ts$/, use: "ts-loader" },{test: /\.s[ac]ss$/i,use: getStyleLoader("sass-loader"),},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 不需要下载 loader webpack5内置处理// 小于10kb 的图片转base64// 优点 减少请求的数量  缺点 体积会大一点点maxSize: 10 * 1024, // 10kb},},generator: {//打包后指定图片路径// [hash:10] hash值取前十位filename: "imgs/[hash][ext][query]",},},{test: /\.(ttf|woff2?|mp3|mp4)$/,type: "asset/resource", //转base64 用assetgenerator: {//打包后指定文字路径filename: "media/[hash][ext][query]",},},{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: [{loader: "thread-loader", // 开启多进程options: {works: threads, // 进程数},},{loader: "babel-loader",// 下面对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处options: {//  presets: ["@babel/preset-env"],cacheDirectory: true, // 开启babel缓存cacheCompression: false, //  关闭缓存文件压缩plugins: ["@babel/plugin-transform-runtime"], //减少代码体积},},],},],},],},//插件// plugin的配置plugins: [new ESLintPlugin({context: path.resolve(__dirname, "../src"), //检查文件exclude: "node_modules", //默认值cache: true, // 开启缓存cacheLocation: path.resolve(__dirname,"../node_modules/.cache/eslintcache"),threads, //开启多进程}),new HtmlWebpackPlugin({//模版，以public/index.html文件为模版创建新的html文件//新的html文件特点：1结构和原来一致，2.自动引入打包输出的资源template: path.resolve(__dirname, "../public/index.html"),}),new PreloadWebpackPlugin({rel: "preload", //option:prefetchas: "scrpit", //option:stylesheet/icon/next}),new MiniCssExtractPlugin({filename: "css/[name].[contenthash:10].css",chunkFilename: "css/[name].chunk.[contenthash:10].css",}),new ImageMinimizerPlugin({test: /\.(jpe?g|png|gif|svg)$/i, // 匹配要压缩的图像文件类型的正则表达式exclude: /node_modules/, // 排除哪些文件夹下的图像不参与压缩minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [["gifsicle", { interlaced: true }], // 使用gifsicle插件压缩gif图像["jpegtran", { progressive: true }], // 使用jpegtran插件压缩jpg图像["optipng", { optimizationLevel: 5 }], // 使用optipng插件压缩png图像["svgo",{plugins: ["preset-default", // 使用svgo的默认插件集合压缩svg图像"prefixIds", // 为svg元素添加唯一前缀，防止id冲突{name: "sortAttrs",params: {xminsOrder: "alphabetical", // 按字母顺序排序svg属性},},],},],],},},}),// 下面两个插件可以放在这个位置// new CssMinimizerPlugin(),// new TerserWebpackPlugin({//     parallel:threads  //开启多进程并设置进程数// })],// 也可以放在这个位置 webp5 推荐压缩插件放在下面optimization: {minimizer: [//压缩cssnew CssMinimizerPlugin(),// 压缩jsnew TerserWebpackPlugin({parallel: threads, //开启多进程并设置进程数}),],splitChunks: {chunks: "all",//其他都用默认值},//当缓存文件发生变化，一般所有都更新，加上这个只更新修改的文件，其他缓存文件不变runtimeChunk: {name: (entrypoint) => `runtime~${entrypoint.name}.js`,},},//模式mode: "production",devtool: "source-map",
};

开发环境webpack配置实例

const path = require("path"); //node.js核心模块，专门用来处理路径问题
const os = require("os");const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //编译时生成index.html
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将css文件以单文件link方式引入 避免出现闪屏现象const threads = os.cpus().length;
//启动命令  npx webpack serve --config ./config/webpack.dev.jsmodule.exports = {// 入口entry: "./src/main.js", //相对路径// 输出output: {// 文件的输出路径// 开发模式 没有输出path: undefined,// 入口文件打包的文件名filename: "js/main.js",},// webpack 热更新   使用devServe后运行命令为 npx webpack serve   ctrl+c 终止批处理操作// 开发服务器：不会输出资源，在内存中编译打包devServer: {host: "localhost",port: "4057",hot: true, // 表示启用热模块替换，不用刷新整个页面open: true, //自动打开浏览器},//加载器module: {rules: [// loader的配置{oneOf: [// style-loader 将js中的css通过创建style标签添加html文件中生效// css-loader  将css资源编译成common.js的模块到js中{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] }, // use执行顺序 从右到左、从上到下{ test: /\.ts$/, use: "ts-loader" },{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 不需要下载 loader webpack5内置处理// 小于10kb 的图片转base64// 优点 减少请求的数量  缺点 体积会大一点点maxSize: 10 * 1024, // 10kb},},generator: {//打包后指定图片路径// [hash:10] hash值取前十位filename: "imgs/[hash][ext][query]",},},{test: /\.(ttf|woff2?|mp3|mp4)$/,type: "asset/resource", //转base64 用assetgenerator: {//打包后指定文字路径filename: "media/[hash][ext][query]",},},{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: [{loader:"thread-loader",options:{works:threads}},{loader: "babel-loader",// 下面presets对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处options: {// presets: ["@babel/preset-env"],cacheDirectory: true, // 开启babel缓存cacheCompression: false, //  关闭缓存文件压缩},},],},],},],},//插件// plugin的配置plugins: [new ESLintPlugin({context: path.resolve(__dirname, "../src"), //检查文件cache:true,threads,}),new HtmlWebpackPlugin({//模版，以public/index.html文件为模版创建新的html文件//新的html文件特点：1结构和原来一致，2.自动引入打包输出的资源template: path.resolve(__dirname, "../public/index.html"),}),],//模式mode: "development",devtool: "cheap-module-source-map",
};

webpack优化

webpack优化-见下篇