webpack基础教程-3

最新推荐文章于 2024-07-21 10:17:51 发布
最新推荐文章于 2024-07-21 10:17:51 发布
阅读量118 收藏
点赞数
分类专栏： webpack5 文章标签： javascript 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43484007/article/details/127266738
版权

css处理

提取 Css 成单独文件

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式。这样对于网站来说，会出现闪屏现象，用户体验不好，所以我们应该是单独的 Css 文件，通过 link 标签加载性能才好。

下载

webpack官方

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

修改webpack.prod.js文件 (生产模式才需要打包)

const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // 入口，相对路径和绝对路径都可以
  entry: "./src/main.js",
  // 输出
  output: {
    path: path.resolve(__dirname, "../dist"),
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
    // 自动清空上次打包的内容
    // 原理：在打包前，将path(上面那个)整个目录内容删除，然后再进行打包
    clean: true,
  },
  // 记载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css/, // 只检测.css文件
        use: [
          // 执行顺序：从右到左
          MiniCssExtractPlugin.loader, // 将css打包成单独文件
          "css-loader", // 将css资源编译成commonjs模块到js中
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader", // 将less编译成css文件
        ],
      },
      {
        test: /\.(png|jpe?g|git|webp|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 这里配置小于20kb的图片就转为base64
            // 优点：减少请求数量
            // 缺点：体积会变大
            maxSize: 20 * 1024,
          },
        },
        generator: {
          // 输出图片路径及名称
          // [hash:10] hash值只取前10位
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        // 处理字体、音频、视频等资源
        test: /\.(tff|woff2?|map3|map4|avi)$/,
        type: "asset/resource", // 不转换位base64
        generator: {
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不处理node_modules下的js文件
        loader: "babel-loader",
      },
    ],
  },
  // 插件
  plugins: [
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1、结构和原来一致 2、自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),
  ],
  // 生产模式不需要devServer
  // 模式
  mode: "production",
};

在这里插入图片描述
在这里插入图片描述

css兼容性处理

下载

npm i postcss-loader postcss postcss-preset-env -D

修改package.json文件

在这里插入图片描述

修改webpack.prod.js文件

在这里插入图片描述

const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // 入口，相对路径和绝对路径都可以
  entry: "./src/main.js",
  // 输出
  output: {
    path: path.resolve(__dirname, "../dist"),
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
    // 自动清空上次打包的内容
    // 原理：在打包前，将path(上面那个)整个目录内容删除，然后再进行打包
    clean: true,
  },
  // 记载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css/, // 只检测.css文件
        use: [
          // 执行顺序：从右到左
          MiniCssExtractPlugin.loader, // 将css打包成单独文件
          "css-loader", // 将css资源编译成commonjs模块到js中
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大都数兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          // 要写在 css-loader后面，less-loader前面
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大都数兼容性问题
                ],
              },
            },
          },
          "less-loader", // 将less编译成css文件
        ],
      },
      {
        test: /\.(png|jpe?g|git|webp|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 这里配置小于20kb的图片就转为base64
            // 优点：减少请求数量
            // 缺点：体积会变大
            maxSize: 20 * 1024,
          },
        },
        generator: {
          // 输出图片路径及名称
          // [hash:10] hash值只取前10位
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        // 处理字体、音频、视频等资源
        test: /\.(tff|woff2?|map3|map4|avi)$/,
        type: "asset/resource", // 不转换位base64
        generator: {
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不处理node_modules下的js文件
        loader: "babel-loader",
      },
    ],
  },
  // 插件
  plugins: [
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1、结构和原来一致 2、自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),
  ],
  // 生产模式不需要devServer
  // 模式
  mode: "production",
};

测试

在这里插入图片描述
结果
在这里插入图片描述
实际开发配置
在这里插入图片描述
“last 2 version” 浏览器最近的2个版本
“> 1%” 市面上的99%的浏览器
“not dead” 不要废弃的

优化配置

把重复的代码提取出来，以函数的形式

const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

function getStyleLoader() {
  return [
    // 执行顺序：从右到左
    MiniCssExtractPlugin.loader, // 将css打包成单独文件
    "css-loader", // 将css资源编译成commonjs模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大都数兼容性问题
          ],
        },
      },
    },
  ];
}
module.exports = {
  // 入口，相对路径和绝对路径都可以
  entry: "./src/main.js",
  // 输出
  output: {
    path: path.resolve(__dirname, "../dist"),
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
    // 自动清空上次打包的内容
    // 原理：在打包前，将path(上面那个)整个目录内容删除，然后再进行打包
    clean: true,
  },
  // 记载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css/, // 只检测.css文件
        use: getStyleLoader(),
      },
      {
        test: /\.less$/,
        use: [
          ...getStyleLoader(),
          "less-loader", // 将less编译成css文件
        ],
      },
      {
        test: /\.(png|jpe?g|git|webp|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 这里配置小于20kb的图片就转为base64
            // 优点：减少请求数量
            // 缺点：体积会变大
            maxSize: 20 * 1024,
          },
        },
        generator: {
          // 输出图片路径及名称
          // [hash:10] hash值只取前10位
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        // 处理字体、音频、视频等资源
        test: /\.(tff|woff2?|map3|map4|avi)$/,
        type: "asset/resource", // 不转换位base64
        generator: {
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不处理node_modules下的js文件
        loader: "babel-loader",
      },
    ],
  },
  // 插件
  plugins: [
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1、结构和原来一致 2、自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),
  ],
  // 生产模式不需要devServer
  // 模式
  mode: "production",
};

css压缩

下载

npm i css-minimizer-webpack-plugin -D

修改webpack.prod.js文件

方法一：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

方法二：
在这里插入图片描述
结果：
在这里插入图片描述

html和js压缩

默认生产模式已经开启了：html 压缩和 js 压缩
不需要额外进行配置
在这里插入图片描述
在这里插入图片描述

不点外卖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack教程
m0_72967249的博客
11-23 277
webpage
webpack5基本教程-1
weixin_43484007的博客
10-10 347
开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。
webpack打包css文件
m0_52434369的博客
07-06 258
首先，我们要先安装两个包 1：style-loader（先把css文件和js文件一起打包），css-loader(和js文件一起从外部导入BOM中) 执行命令： npm i css-loader style-loader -D(开发时用上线后不用) 2：在src文件夹下面建立index.html和index.js(因为index.js是默认的打包入口,自己也可以更改哟，可以参考我前面的两篇文章哟) 3：在src文件夹下建tyle.css并写好样式（src为存放源代码的文件，在主项目文件夹下面） 3:
前端开发之html属性style对象获取和设置行内样式
imbzz的博客
07-25 3911
html属性style对象获取和设置行内样式
webpack入门到实战（中）
weixin_43443341的博客
06-09 157
webpack开发环境其他配置以及生产环境的优化打包
[webpack] 处理样式 (二)
959
08-07 196
webpack之处理样式 (二)
Webpack基础笔记二
qq_62401904的博客
09-26 639
webpack5基础配置二
webpack-tutorial-collection：webpack教程资源收集
02-06
- **基础教程**：介绍Webpack的基本配置和使用方法。 - **进阶教程**：涵盖Webpack的高级特性，如动态导入、代码分割、热模块替换（HMR）等。 - **案例研究**：提供实际项目中的Webpack配置示例。 - **Vue/React结合...
webpack-learn-vue
03-29
这将有助于你理解 Webpack 在实际项目中的工作原理，提升项目构建效率，并为更复杂的应用场景打下基础。 总之，Webpack 是现代前端开发不可或缺的一部分，它与 Vue.js 的结合让项目构建更加高效和灵活。通过深入...
webpack-library-base
03-31
"webpack-library-base" 提示我们这是一个关于构建JavaScript库的基础配置教程。下面将详细讨论Webpack的核心概念、配置以及如何创建JavaScript库。 1. **Webpack核心概念**： - **Entry**: 入口（Entry）是...
webpack-angular-presentation
05-10
Webpack 和 Angular.js 结合使用是现代前端开发中的常见实践，这个名为 "webpack-angular-presentation" 的项目很可能是关于如何配置和使用这两个工具的教程或演示文稿。Webpack 是一个强大的模块打包工具，它允许...
webpack-tutorial-chump:只是webpack教程中的文件
05-30
这个"webpack-tutorial-chump"教程是专门为学习Webpack的基础知识而设计的。 Webpack 的核心概念主要包括： 1. **入口（Entry）**：这是Webpack开始构建依赖图的地方。你可以指定一个或多个入口点，Webpack会从...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1213
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 806
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
react 快速入门思维导图
weixin_44565776的博客
07-18 328
只要掌握了这些react技能，基本就可以熟练使用react了
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 233
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 245
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 688
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU
thinkphp8结合layui2.9 图片上传验证
最新发布
quweiie的专栏
07-21 112
thinkphp8图片上传的验证
webpack基础教程
08-24
- *2* *3* [webpack基础教程](https://blog.csdn.net/k0101jcj/article/details/106825691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值