简述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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
详解vue 组件的实现原理
Nov 12 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异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
Express.JS使用详解
2014/07/17 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python dataframe NaN处理方式
2019/12/26 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
彻底解决Python包下载慢问题
2020/11/15 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
家长给小学生的评语
2014/01/30 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
常务副总经理任命书
2014/06/05 职场文书
经营理念标语
2014/06/21 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
2014年药房工作总结
2014/11/22 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
nginx lua 操作 mysql
2022/05/15 Servers