WebPack 和要求

Question

我有一个模块 A 如下，模块 A 是使用 web pack 的捆绑包，它包含模块 B。该模块还使用 require 变量导出 Highcharts 库

A.js（模块文件夹下:: 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;

注释模块B.js 捆绑在A.js

中

当我加载 javascript 时，它向我抛出一个错误，Highcharts 未定义。

//如何加载这个

chart = new Highcharts.Chart({

        });

为避免此错误，我执行了以下操作。

在 B.js 中执行了以下操作。

var Highcharts = require('highcharts');

还将 B.js 从公用文件夹移动到模块文件夹，因为它现在是一个入口点（从 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.js7:14-37

Webpack.config.js

入口点将是模块文件夹下的所有文件。

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

"Clearly i don't want to load my highchairs lib in moduleB as it is not an entry point for web pack"

实际情况并非如此，看起来很不直观！您确实需要在 moduleB 中导入 Highcharts，因为那是您使用它的地方。在 Node 和 Webpack 中，模块导入不是全局的；如果你有一个 moduleC 和另一个图表，你也必须在那里导入 Highcharts。

Webpack 足够聪明，不会 run/include 导入代码两次，因此没有理由避免这样做。详细解释了这是如何工作的。

编辑：看看你的配置，我想你可能对 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;

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

WebPack 和要求

WebPack and Require

javascript

require

highcharts

webpack