Vue cli3 chainWepack 使用用法

在项目开发中我们难免碰到需要对webpack配置更改的情况，这就需要对 loader 进行配置。

loader

定义

l o a d e r让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对它们进行处理。

本质上，webpackloader将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块。

在webpack配置中定义loader时，要定义在module.rules中，而不是rules*。*

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

rules是一个数组，所有的loader配置都可以写在这个数组里，每个loader配置是一个对象。

module:{

    rules:[{

      test:/.js$/,
      use:[{

        loader:'babel-loader',
        options: {

        presets: [
         "es2015", "react"
        ],
        plugins: ["syntax-dynamic-import"]
     }

      }
]
    }
]
  }

每个 loader 对象配置属性如下：

• test ：test 是 一个 正则表达式， 用来匹配不同的类型文件
• use： use 是 一个 数组，里面存放使用的 loader 。 当匹配到文件后，将会按use 里面存放的 loader 去解析处理文件的内容。

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

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

 use:[{

        loader:'babel-loader',
        options: {

          presets: [
           "es2015", "react"
          ],
          plugins: ["syntax-dynamic-import"]
     		}

   }
]

使用这些loader 时，必须先安装它们。

多环境切换 loader 配置

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

// vue.config.js
module.exports = {
    
 configureWebpack: config =>
 {

  if (process.env.NODE_ENV === 'production') {

   // 为生产环境修改配置...
  }
 else {

   // 为开发环境修改配置...
  }

 }

}

配置

使用 configureWebpack 简单配置

/ vue.config.js
module.exports = {

 configureWebpack: {

  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 }

}

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

使用 chainWebpack 高级配置

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

它允许我们更细粒度的控制其内部配置。

1. 修改loader

// vue.config.js
module.exports = {
    
 chainWebpack: config =>
 {
    
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options =>
 {

     // 修改它的选项...
     return options
    }
)
 }

}

2. 添加新的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
      .use('other-loader')
        .loader('other-loader')
        .end()
  }

}

3.替换一个规则里的 Loader

如果你想要替换一个已有的[基础 loade，例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件：

// vue.config.js
module.exports = {
    
  chainWebpack: config =>
 {

    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }

}

4. 引用全局共用的样式文件

module.exports = {

 // ...
 css: {

  loaderOptions: {

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

  }

 }

}
    ;
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！