在vue-cli3.0中配置webpack

Posted 2023-04-05

参考技术A 在vue-cli3.0中，对各种配置文件进行了合并，若要进行webpack相关配置，需要在项目根目录下新建vue.config.js文件

在 vue.config.js 中的 configureWebpack 选项提供一个对象：

提示：有些webpack设置选项是基于vue项目设置的，为了保证vue可以正常工作，某些webpack的配置需要遵从vue提供的配置选项，例如

如果你熟悉webpack，你已经可以开始配置项目了

扩展：链式操作---jquery那般的链式书写方式

官方文档： https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

webpack 配置scssless全局样式（自定义的，vue-cli2/3）

参考技术A

一般的，引入全局设置的基本样式

这样在引入scss文件中可以使用 base 里的全局变量
但是 避免在资源文件中使用SASS @ import 规则，因为它会降低增量构建的速度。直接在webpack config 中的 sassResources 数组中添加导入的文件。
以 scss 为例, 在自己配的webpack,和vue-cli2/3中配置全局样式引入
（ sass-resources-loader 也可以用来配置 less ）

确保package.json有 node-sass ， sass-loader ， style-loader
安装 sass-resources-loader sass-resources-loader

再在配置中更改

安装 sass-resources-loader
修改build中的utils.js

安装 sass-resources-loader
修改build中的utils.js

vue.config.js
不需要安装 sass-resources-loader
只需要确保安装了 node-sass sass-loader

有些会报错

这样配置后在

直接使用

vue.config.js

确保安装了 node-sass sass-loader

vue.config.js