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

前言

在项目开发中我们难免碰到需要对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的使用方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 基于vue-cli搭建多模块且各模块独立打包的项目

    如果我们在开发系统A时,能够按模块划分生成多份静态资源包,最终的成果物中,会有多个子目录,每个子目录可独立运行,完成一个业务功能.这样的话,我们有任何系统需要我们开发过的任何模块,都可以直接打包指定的模块,灵活组装. 优点: 1.可与其他系统灵活组装 2.各个模块相互不受影响,所以不受框架和开发模式的制约 3.不同模块可以分开部署 4.后期维护风险小,可以持续的.稳定的进行维护 缺点: 1.各个模块有相互独立的资源包,那么如果有相同的资源引用,不能复用 2.模块的组装要依赖iframe,所以要对

  • vue-cli3项目展示本地Markdown文件的方法

    [版本] vue-cli3 webpack@4.33.0 [步骤]1.安装插件vue-markdown-loader npm i vue-markdown-loader -D ps:这个插件是基于markdown-it的,不需要单独安装markdown-it. 2.修改vue.config.js配置文件(如果没有,在项目根目录新建一个): module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.

  • 详解vue-cli+element-ui树形表格(多级表格折腾小计)

    前沿 最近在项目开发中需要做一个多级表格,树形表格的功能,看看element-ui上没有,自己开是折腾,话不多说,上思路和代码. 效果图: 可点击收缩,展开. 一,首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval.js 先看看index.vue,原理就是在element-ui的基础上做了进一步改造. //利用element-ui的 <template slot-scope="scope">属性,在插入多级表格 <template>

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

    前言 在项目开发中我们难免碰到需要对webpack配置更改的情况,今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用:用configureWebpack简单的配置:用chainWebpack做高级配置:包括对loader的添加,修改:以及插件的配置 1.首先简单介绍一下webpack中loader的简单使用: loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容,在你打包的时候对某些内容需要loa

  • vue项目中使用Svg的方法

    github demo: github地址 闲聊背景 本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg . 众所周知, vue-cli3 已经推出很长一段时间了,大家可以感受一下 vue-cli3 带来的零配置体验.But,也相应带来了一些弊端,就是如归需要修改默认的 loader 时,会比较麻烦. 们接下来主要使用的就是上文中提到的 svg 的 use ,先上一张 vue-cli3 搭建的项目的目录,可以看到根目录下只保留了 public/ 以及 src/

  • Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • Vue.js 中的实用工具方法【推荐】

    收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器.公用指令等 (PS: 懒人养成记) 公用自定义过滤器 import Vue from 'vue' import moment from 'moment' /** * @filter dateFormat 时间格式化 * @param {String, Date} value 可被 new Date 解析的字符串 * @param {String} formatStr moment 的 format 字符串 * 使用方法 {{ 20

  • vue组件中的数据传递方法

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 一.父组件向子组件传递数据 子组件部分: <template> <div class="child"> {{ msg }} </

  • vue项目中的webpack-dev-sever配置方法

    问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器 解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在vue项目中引用Iview的方法

    关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro

随机推荐