vue-loader与vue-cli webpack配置笔记：vue-config.js笔记 替换loader
Author：zhoulujun Date：
vue-loader
Vue Loader 是一个 webpack 的 loader(在vue-cli中已自动集成)，以下功能都依赖于Vue Loader:
单文件组件(.vue)
Sass语法
scoped功能
将 <style> 和 <template> 中引用的资源当作模块依赖来处理
开发热重载
当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。因此动态添加/更改的资源非绝对路径需要使用require处理。
<img src="../image.png">
<!-- 将会被编译为 -->
createElement('img', {
attrs: {
src: require('../image.png') // 现在这是一个模块的请求了
}
})默认下列标签/特性的组合会被转换，且这些组合时可以使用 transformAssetUrls 选项进行配置的。
如配置额外的 <style> 块使用 css-loader，也可以使 CSS 中的资源 URL 变成模块请求。
Vue Loader 会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的其他 loader。
资源路径转换规则
如果路径是绝对路径或相对虚拟目录 (例如 /images/foo.png)，会原样保留。
如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
如果路径以 @ 开头，也会被看作模块依赖。可通过 webpack 配置给 @ 配置 alias。vue-cli 创建的项目都默认配置了将 @ 指向 /src。
如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：<img src="~some-npm-package/foo.png">
资源文件转换方式
file-loader 允许指定要复制和放置资源文件的位置，并使用版本哈希命名以获得更好的缓存，且允许使用相对路径而不用担心部署时 URL 的问题。
url-loader 允许将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。
vue-cli
vue-cli3之后，webpack配置被隐藏了，用vue-cli创建vue项目，需要新建vue.config.js ，并在里面按照官方规则配置vue。对我来说，是感觉更加麻烦了。
Vue cli 3 is based on webpack 4, Vue cli 2 or webapck 3。
如果不喜欢vue-cli，可以使用 https://github.com/zhoulujun/webpack4-vue2-project-template
vue.config.js 文件
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
但是。这里其它都直接看官方文档的即可。需要注意的是
configureWebpack
如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
如果是函数，看的优点迷糊
configureWebpack: (config) => {
//config 为vue-cli原有配置项,直接修改
config.resolve.extensions = ['.js', '.vue', '.json', '.ts', '.tsx'] //修改原有配置
// 增加rulus
config.module.rules.push({
test: /\.vue$/,
use: [{
loader: 'iview-loader', // 解决ivew组件 忽略前缀i的问题
options: {
prefix: false
}
}]
return {...} //返回对象会合并到vue-cli原有配置中去(webpack-merge)。不是覆盖
}这个config就是webpack的配置，比如我需要替换webpack module rules 里面的 sass-loader ，那么操作起来会比较麻烦
chainWebpack
如果是函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
更多细节可查阅：配合 webpack > 链式操作：Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。
webpack-chain:(config)=>{}
函数参数config 即const Config = require('webpack-chain'); const config = new Config();
比如上面，去修改sass-loader配置
chainWebpack: (config) => {
const sassRule = config.module.rule('sass')
sassRule.include.add('src').end()
sassRule.uses.clear()
sassRule
.use('sassjs-loader')
.loader('vue-style-loader')
.loader('style-loader') // 坑：会报style-loader: Adds some css to the DOM by adding a <style> tag
.loader('css-loader')
.loader('sassjs-loader')
.tap(options => {
// 修改它的选项...
return options
}).end()
config.plugins.delete('pwa')
config.plugin('clean').use(CleanPlugin, [['dist'], { root: '/dir' }]);
}其实也只有求助 官方文档，https://umijs.org/zh/config/#chainwebpack
个人还是看选择configureWebpack 去修改vue-cli 配置。当然，还是自己手工配置webpack 项目，用起来爽！
参考文章：
vue-loader与vue-cli3 https://www.jianshu.com/p/193b08a6f711
转载本站文章《vue-loader与vue-cli webpack配置笔记：vue-config.js笔记 替换loader》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8421.html