Webpack的一些问题

  1. webpack各种依赖之间的版本兼容问题非常大，需要充足的经验并查询文档。
  2. webpack性能优化是很困难。复杂，工作量大，项目大启动慢。多使用CDN能帮助webpack大幅度提升性能。

  3. webpack复杂配置上手很困难。

    Webpack的一些优点

  4. webpack的生态很好，网上一查就有很多解决方案，Git上也有很多解答。

  5. webpack的扩展性很强，目前的Vite面对大型项目会力不从心。

    需要用到的依赖

  6. sass less -> sass sass-loader

  7. postcss postcss-loader -> autoprefixer
  8. css-loader:模块化解析

  9. vue-style-loader

    需要注意的点

  10. 使用yarn或者是npm进行安装，建议安装的时候不要yarn和npm混着用。

  11. 尽可能的使用npm和yarn。

  12. 尽可能不使用cnpm和淘宝镜像源。

    Webpack配置流程和问题

    在终端命令行进行安装

    1. yarn add sass sass-loader postcss postcss-loader autoprefixer css-loader vue-style-loader -D
    2. npm run dev

    sass-loader报错

  13. 因为sass-loader的版本是12，我们尝试换成10

  14. 我们也可以通过搜索查到，sass-loader哪个版本比较好。

image.png

删除sass-loader

yarn remove sass-loader

重新安装sass-loader10.1.1

yarn add sass-loader@^10.1.1 -D

重新运行

npm run dev

继续出现错误

postcss-loader出现问题
image.png

移除后安装其他版本

yarn remover postcss-loader
安装版本4
yarn add postcss-loader@^4  -D
安装后执行
npm run dev

运行后又出现错误

css-loader出现错误
webpack版本4兼容的是css-loader版本4
image.png

移除后安装版本4

yarn remover css-loader
yarn add css-loader@^4 -D
npm run dev

成功运行

image.png