webpack5 踩坑日记（持续更新~~）

Love The Way You Lie 2022-12-26 15:21 387阅读 0赞

文章目录

        • 前言
        • 一、打包图片资源时
          • 问题1：
          • 问题2：
        • 二、启动devServer指令更改为：npx webpack serve
        • 三、在生产环境配置 做 css兼容性处理 时
          • 问题1：
          • 问题2：
        • 四、在生产环境配置 做HTML压缩 时
        • 五、
        • 六、
        • 七、

前言

  最近跟着视频想详细学一下webpack，因为我下载的是最新版，webpack5，视频里是webpack4，难免遇到一些视频里没问题我这里报错的情况，现总结一下。

一、打包图片资源时

问题1：

在 output 加上 publicPath:’./’，否则会报错，应该是版本问题

  1. publicPath:'./'

在这里插入图片描述

问题2：

下面这个问题用webpack版本5不会出现，应该是被解决了，故不用再配置 esModule: false
在这里插入图片描述

二、启动devServer指令更改为：npx webpack serve

  1. npx webpack serve

三、在生产环境配置 做 css兼容性处理 时

问题1：

在配置 postcss-loader 时，新建 postcss.config.js 文件，写入下述代码：

  1. module.exports = { 
  2.     plugins: [
  3.         // postcss的插件
  4.         require('postcss-preset-env')
  5.       ]
  6. }

  • 在 webpack.config.js 中 使用loader的默认配置：

    ‘postcss-loader’,

如下图所示：
在这里插入图片描述
或者采用下图中所示方式：
在这里插入图片描述

问题2：

在生产环境下，对 display: flex; 不生效，但是如果我们把package.json改成 >0.01% 就能看到变化了：
在这里插入图片描述
在这里插入图片描述

四、在生产环境配置 做HTML压缩 时

视频里是写了下述代码实现了html压缩，但是webpack5已经可以直接设置一句 mode: ‘production’ 自己压缩了
在这里插入图片描述

五、

六、

七、

发表评论

表情：
评论列表 （有 0 条评论，387人围观）

还没有评论，来说两句吧...

相关阅读