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