简述vue-cli中chainWebpack的使用方法


Posted in Javascript onJuly 30, 2019

前言

在项目开发中我们难免碰到需要对webpack配置更改的情况,今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用;用configureWebpack简单的配置;用chainWebpack做高级配置;包括对loader的添加,修改;以及插件的配置

1、首先简单介绍一下webpack中loader的简单使用:

loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容,在你打包的时候对某些内容需要loader来处理一下,比如css模块;默认webpack只会处理js代码,所以当我们想要去打包其他内容时,就需要相应的loader去处理某些内容

使用方法:

在配置文件中webpack.config.js加入module属性,该属性是一个对象,在这个属性中有一个rules字段,先上代码

module:{
    rules:[{
      test:/\.js$/,
      use:[{
        loader:'babel-loader',
        options: {
        presets: [
         "es2015", "react"
        ],
        plugins: ["syntax-dynamic-import"]
     }
      }]
    }]
  }

rules是一个数组,你所有的loader配置都可以写在这个数组里,每个loader配置是一个对象,匹配不同的规则;

test:test后是一个正则表达式,匹配不同的文件类型;

use:在这个规则中,当你匹配了这个文件后,需要使用相应的loader去处理这类型的文件,use接收的是一个数组,意味着当他匹配到文件后,它可以启用很多的loader去处理文件的内容;

如果使用的是loader的默认配置,可以写use:['css-loader','style-loader'];

如果是需要用到额外配置则需要写成对象,讲配置写在options里;

当然,还会有其他的一些属性比如(exclude、include等),这里就不再详细赘述

在你使用这些loader之前需要用npm去安装这些包;

2、用configureWebpack简单的配置;

/ vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 }
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:

// vue.config.js
module.exports = {
 configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
   // 为生产环境修改配置...
  } else {
   // 为开发环境修改配置...
  }
 }
}

3、用chainWebpack做高级配置

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。

官方文档给我提供了一些简单的示例:

修改 Loader 选项

// vue.config.js
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
     // 修改它的选项...
     return options
    })
 }
}

添加一个新的 Loader

// vue.config.js
module.exports = {
 chainWebpack: config => {
  // GraphQL Loader
  config.module
   .rule('graphql')
   .test(/\.graphql$/)
   .use('graphql-tag/loader')
    .loader('graphql-tag/loader')
    .end()
 }
}

替换一个规则里的 Loader,

// 添加svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .tap(options => {
    options = {
     symbolId: 'icon-[name]'
    }
    return options
   })

修改插件的代码可以看下面的例子;

先上代码,今天主要讲我们项目中配置,配置的api地址: https://cli.vuejs.org/zh/conf...

const path = require('path')
const webpack = require('webpack')
module.exports = {
 // 修改output.path
 outputDir: 'dist',
 // 修改output.publishPath
 publishPath: './',
 chainWebpack: config => {
  // 添加全局scss文件
  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  types.forEach(type => { //匹配到所有需要导入的文件
   config.module.rule('scss').oneOf(type).use('style-resource')
    .loader('style-resources-loader')
    .options({
     patterns: [
      path.resolve(__dirname, 'src/css/base.scss')
     ]
    })
  })
  // 添加svg-sprite-loader
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .tap(options => {
    options = {
     symbolId: 'icon-[name]'
    }
    return options
   })
  // 移除 prefetch 插件 //预加载
  config.plugins.delete('prefetch')
  // 引入
  const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
  config.plugin('dll-reference-plugin')
   .use(webpack.DllReferencePlugin)
   .tap(options => {
    options[0] = {
     context: __dirname,
     manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
    }
    return options
   })
  config.plugin('add-asset-html-webpack-plugin')
   .use('add-asset-html-webpack-plugin')
   .tap(options => {
    options[0] = {
     filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
    }
    return options
   })
 }
}

上述代码里使用了style-resources-loader,可以自动化导入文件;

DllReferencePlugin这个插件是为了使第三方以来和我们自己编写的代码分开打包,提升打包速度;需要和add-asset-html-webpack-plugin这个插件一起使用;

使用这个插件打包后,在src/common_chunk这个文件夹下生成工具库,将第三方依赖打包到一个文件里,并生成一个所有库代码的一个索引manifest.json文件

ps:全局引入公共样式文件的另一种方法,这样也可以直接在使用公共样式了

module.exports = {
 // ...
 css: {
  loaderOptions: {
   sass: {
    // 根据自己样式文件的位置调整
    data: `@import "@src/css/base.scss";`
   }
  }
 }
};

总结

以上所述是小编给大家介绍的vue-cli中chainWebpack的使用方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
vue接口请求加密实例
Aug 11 Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
You might like
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP简单遍历对象示例
2016/09/28 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python中动态创建类实例的方法
2017/03/24 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
原生python实现knn分类算法
2019/10/24 Python
python几种常用功能实现代码实例
2019/12/25 Python
pytorch实现查看当前学习率
2020/06/24 Python
大专自我鉴定范文
2013/10/01 职场文书
给客户的道歉信
2014/01/13 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
英语教学课后反思
2016/02/15 职场文书
六年级作文之自救
2019/12/19 职场文书
python关于集合的知识案例详解
2021/05/30 Python