网页包装和要求

Question

我有一个如下的模块A，模块A是使用Web包的捆绑包，它包括模块B。该模块还使用需要变量导出高图表库

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=需要（“Highcharts”）；

还将B.js从common文件夹移动到modules文件夹，因为它现在是一个入口点（从src/main/webapp/resources/js/modules移动到src/main/webapp/resources/js/common）

WebPack给我以下错误。
在./src/main/webapp/资源/js/模块中找不到错误：错误：不允许对切入点的依赖@./src/main/webapp/资源/js/模块/A. js 7:14-37

网页包。配置。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在模块文件夹之外，因为它不是切入点。后来它被移动到模块文件夹内，因为我们已经将其作为切入点。

Answer 1

“显然，我不想在moduleB中加载highchairs库，因为它不是web pack的入口点。”

事实并非如此，这似乎并不直观！您确实需要在模块B中导入Highcharts，因为这就是您使用它的地方。在节点和网页包中，模块导入不是全局的；如果你有一个包含另一个图表的moduleC，你也必须在那里导入Highcharts。

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;

*这是一个概括——你可以有多个入口点，但它们需要独立——它们绝对不能相互导入。'