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

安装 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