欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack:使用expose-loader 解决第三方库的插件依赖问题

程序员文章站 2024-01-22 21:32:28
...

安装 node模块 
npm install jquery --save 
npm install bootstrap --save

npm file-loader url-loader style-loader css-loader --save-dev


安装 expose-loader

npm install expose-loader --save-dev

修改 webpack.config.js:为jquery模块暴露多个变量jQuery、$、scrollable

  module: {
    rules: [{
        test: require.resolve('jquery'),
        loader: 'expose-loader?jQuery!expose-loader?$!expose-loader?scrollable'
      },
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "es2015", "react"
            ]
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }]
      },
      {
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader: 'url-loader?name=[path][name].[ext]'
      }
    ]
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

最后在main.js 使用

import $ from 'expose-loader?$!jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../lib/jquery.pagepiling';
  • 1
  • 2
  • 3