Configure loader in vue-cli3 vue.config.js

Front-end rookie asks for help: it seems feasible to introduce jquery, globally into the vue project and find a document. To use expose-loader,
https://www.cnblogs.com/qiqi1.
, but the configuration is not quite the same as vue.config.js.
also found that the loader in vue.config.js is like this

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

but what I want to configure now is expose-loader, how to change it? thank you, boss.

Webpack4 vue.js vue-loader

Sep.16,2021

blogger, found a better solution. Instead of using webpack-chain, he used the simple webpack configuration interface provided by vue-cli: configureWebpack , which is also solved. It feels a little simpler and easier to understand.

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"},
    ]
}
//

you can refer to an article I wrote earlier:
citing jQuery and bootstrap in vue-cli scaffolding and writing css using sass and less [introduction to vue-cli configuration]: https://juejin.im/post/5986f5.

Previous: Could you tell me a train of thought about the roulette map?

Next: The react-router page refreshes, but the active effect of the menu bar is reset.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be9d19-319cc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be9d19-319cc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?