vue-cli3 vue.config.js中配置loader

Question

前端小白求助：想在vue项目中全局引入jquery，查到一个文档好像可行，要用到expose-loader，
https://www.cnblogs.com/qiqi1...
但配置和vue.config.js不太一样，
同时也查到了vue.config.js中配加载器是这样

             // vue.config.js
             module.exports = {
              chainWebpack: config => {
               config.module
                .rule('scss')
                .use('sass-loader')
                .tap(options =>
                 merge(options, {
                  includePaths: [path.resolve(dirname, 'node_modules')],
                 })
                )
              }
             

但是现在要配置的是expose-loader，请问怎么改，谢谢大佬了~

Answer 1

博主，找到了一种比较好的解决办法，没使用webpack-chain，而是使用了vue-cli提供的简单配置webpack的接口:configureWebpack，也解决了，感觉比这个稍微简单好理解点:

configureWebpack: (config) => {
    config.module.rules.push({
      // 处理jquery
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jquery'
      }, {
        loader: 'expose-loader',
        options: '$'
      }, {
        loader: 'expose-loader',
        options: 'jQuery'
      }]
    })
  }

Answer 2

    问题解决了，我是这样写的，希望对后来者有帮助
 
    config.module
        .rule('expose1')
        .test(require.resolve('jquery'))
            .use()
            .loader('expose-loader')
            .options("jQuery")
            .end()
    config.module
        .rule('expose2')
        .test(require.resolve('jquery'))
            .use()
            .loader('expose-loader')
            .options("$")
            .end()

Answer 3

 module: {
    rules: [
      {test: require.resolve("jquery"), use: "expose-loader?$"},
      {test: require.resolve("jquery"), use: "expose-loader?jQuery"},
    ]
}
//这样应该可以的 

Answer 4

可以参考一下，我之前写的一篇文章：
在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]:https://juejin.im/post/5986f5...

Answer 5

官网的例子不行吗？
https://cli.vuejs.org/guide/webpack.html#adding-a-new-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()
      // Add another loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}