WebPack和Require

Question

我有一個如下的模塊A，模塊A是使用Web Pack的捆綁軟件，它包含模塊B。該模塊還使用require變量導出Highcharts庫。

A.js（在modules文件夾下:: src / main / webapp / resources / js / modules）

var HighCharts = require("highchart");
var moduleB = require("../common/B.js"); //so that we can call draw() of moduleB

$(document).ready(function() {
    moduleB.print();
}

B.js（在公共文件夾下：src / main / webapp / resources / js / common）

var print = function() {
console.log("something");
draw();
}
var chart;
function draw() {
    chart = new Highcharts.Chart({

    });
}

exports.print = print;

注意ModuleB.js捆綁在A.js中

當我加載JavaScript時，它拋出了一個錯誤，Highcharts未定義。

//如何加載

chart = new Highcharts.Chart({

        });

為避免此錯誤，我執行了以下操作。

在B.js中執行以下操作。

var Highcharts = require（'highcharts'）;

還將B.js從通用文件夾移到modules文件夾，因為它是一個Entry Point Now（已從src / main / webapp / resources / js / common移至src / main / webapp / resources / js / modules）

WebPack給我以下錯誤。
在./src/main/webapp/resources/js/modules/A.js中找不到錯誤：錯誤：@。/ src / main / webapp / resources / js / modules / A不允許依賴入口點.js 7：14-37

Webpack.config.js

入口點將是modules文件夾下的所有文件。

var path = require('path');
var webpack = require("webpack");
var glob = require("glob");
//var BowerWebpackPlugin = require("bower-webpack-plugin");
var jsSrcPath = 'src/main/webapp/resources/js/modules/**/*.js';
var jsDestPath = 'src/main/webapp/resources/build/js/modules';
var cssPath = '';


var files = glob.sync(jsSrcPath, {});
var entries = {};


for (var i = 0; i < files.length; i++) {
  var file = files[i];
  entries[file.replace(/^.*[\\\/]/, '').replace(/\.[^/.]+$/, "")] = path.join(__dirname, file);
}

var webpackOptions = {
  cache: true,
  watch: false,
  entry: entries,
  output: {
    path: __dirname + "/" + jsDestPath,
    filename: '[name].js',
  },
  module: {
    loaders: [{
        test: /.(?:jsx|js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader?blacklist=useStrict'
      },
      // }, {
      //   test: /\.json/,
      //   exclude: /node_modules/,
      //   loader: 'json-loader'
      // }, {
      //   test: /\.css$/,
      //   exclude: /node_modules/,
      //   loader: "style!css"
      // }, {
      //   test: /\.scss$/,
      //   exclude: /node_modules/,
      //   loader: 'style-loader!css-loader!sass-loader!autoprefixer-loader?browsers=last 10 version'
      // }, {
      //   test: /\.(png|jpg)$/,
      //   exclude: /node_modules/,
      //   loader: 'url-loader?limit=999999'
      // }, {
      {
        test: /vendor\/.+\.(jsx|js)$/,
        exclude: /node_modules/,
        loader: 'imports?jQuery=jquery,$=jquery,this=>window'
      }
    ]
  },
  resolve: {
    root: [path.join(__dirname, "bower_components")],
    extensions: ['', '.js', '.json', '.jsx', '.css']
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: {
    //     warnings: false
    //   }
    // })
  ],
  devServer: {
    contentBase: ".",
    noInfo: true, //  --no-info option
    hot: true,
    inline: true
  }
};



module.exports = webpackOptions;

PS：最初，B.js不在模塊文件夾中，因為它不是入口點。 后來它被移到modules文件夾中，因為我們將其作為入口點。

Answer 1

“顯然，我不想將我的高腳椅子庫加載到moduleB中，因為它不是Web Pack的入口點”

實際上並非如此，看起來似乎並不直觀！ 您確實需要在moduleB導入Highcharts，因為這是您使用它的地方。 在Node和Webpack中，模塊導入不是全局的。 如果您有一個帶有其他圖表的moduleC ，則也必須在其中導入Highcharts。

Webpack非常聰明，不會運行/包含兩次導入的代碼，因此沒有理由避免這樣做。 我不久前寫的答案完全解釋了它是如何工作的。

編輯：查看您的配置，我認為您可能對Webpack的工作方式有錯誤的想法。 您無需輸入文件的整個目錄，然后再獲得包含文件的整個目錄。 您將一個文件設置為入口點，然后Webpack跟蹤其所有依賴項，並將所有內容捆綁到一個輸出文件中*。 顧名思義，入口點是進入應用程序的入口-絕對不應該像現在一樣將源文件夾中的每個文件都設置為入口點！

這是（希望）配置的固定版本：

var path = require('path');
var webpack = require("webpack");
var jsDestPath = 'src/main/webapp/resources/build/js/modules';
var cssPath = '';

var webpackOptions = {
  cache: true,
  watch: false,
  entry: path.join(__dirname, "src/main/webapp/resources/js/modules/a.js"),
  output: {
    path: __dirname + "/" + jsDestPath,
    filename: '[name].js',
  },
  module: {
    loaders: [{
        test: /.(?:jsx|js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader?blacklist=useStrict'
      },
      // }, {
      //   test: /\.json/,
      //   exclude: /node_modules/,
      //   loader: 'json-loader'
      // }, {
      //   test: /\.css$/,
      //   exclude: /node_modules/,
      //   loader: "style!css"
      // }, {
      //   test: /\.scss$/,
      //   exclude: /node_modules/,
      //   loader: 'style-loader!css-loader!sass-loader!autoprefixer-loader?browsers=last 10 version'
      // }, {
      //   test: /\.(png|jpg)$/,
      //   exclude: /node_modules/,
      //   loader: 'url-loader?limit=999999'
      // }, {
      {
        test: /vendor\/.+\.(jsx|js)$/,
        exclude: /node_modules/,
        loader: 'imports?jQuery=jquery,$=jquery,this=>window'
      }
    ]
  },
  resolve: {
    root: [path.join(__dirname, "bower_components")],
    extensions: ['', '.js', '.json', '.jsx', '.css']
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: {
    //     warnings: false
    //   }
    // })
  ],
  devServer: {
    contentBase: ".",
    noInfo: true, //  --no-info option
    hot: true,
    inline: true
  }
};



module.exports = webpackOptions;

*這是一個概括-您可以有多個入口點，但是它們必須是獨立的-它們絕對不能彼此導入。