トラブルシューティング

BootstrapをimportするとjQueryの定義エラーになる

Uncaught ReferenceError: jQuery is not defined

webpack.config.jsでProvidePluginを指定する。
$jQueryの両グローバル変数でアクセスできるようにすればOK。

module.exports = [
  {
    entry: {
        ...
    },
    output: {
        ...
    },
    module: {
        ...
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
    ],
  },
];

ファイルをそのままコピーしたい

  • file-loaderを使う
  • main.jsなどを複製する場合は別のloaderのexludeも必要
{
  entry: {
    jsx: "./src/app.js",
    html: "./src/index.html",
    js: "./src/main.js"
  },
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: "file?name=[name].[ext]" },
      { test: /\.css$/, loader: "file?name=[name].[ext]" },
      { test: /main\.js$/, loader: "file?name=[name].[ext]" },
      { test: /\.js?$/, exclude: [/node_modules/, /main\.js/], loaders: ["react-hot","babel-loader"]}
    ]
  }
}

上記は以下を満たす例。

  • app.jsと依存ファイルをビルドする
  • index.htmlmain.jsはそのまま/dist配下にコピーする

参考: How to copy static files to build directory with Webpack? – Stack Overflow