Vue cli3 chainWepack使用方法示例详解

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

 use:[{
        loader:'babel-loader',
        options: {
          presets: [
           "es2015", "react"
          ],
          plugins: ["syntax-dynamic-import"]
     		}
   }]

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

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

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

// 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()
  }
}

// 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')
  }
}

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