简述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 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
vue组件实现进度条效果
Jun 06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery插件开发基础简单介绍
2013/01/07 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
js实现计算器功能
2020/08/10 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python中提高pip install速度
2020/02/14 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
深入分析python 排序
2020/08/24 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
银行实习自我鉴定
2013/10/12 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
建议书怎么写
2014/03/12 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
简历自我评价模板
2015/03/11 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL