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

kaka
  • 287

前端小白求助:想在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,请问怎么改,谢谢大佬了~

回复
阅读 28.5k
4 个回答

博主,找到了一种比较好的解决办法,没使用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'
      }]
    })
  }
    问题解决了,我是这样写的,希望对后来者有帮助
 
    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()
 module: {
    rules: [
      {test: require.resolve("jquery"), use: "expose-loader?$"},
      {test: require.resolve("jquery"), use: "expose-loader?jQuery"},
    ]
}
//这样应该可以的 

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

你知道吗?

宣传栏