使用 Webpack 的 Javascript 模块

Question

我正在尝试使用 CommonJS + Webpack 模块在我的 nodejs/express 应用程序中重构客户端 javascript。

使用 Webpack，我构建了一个由两个 js 文件组成的“bundle.js”，其中我按照 CommongJS 语法定义了两个模块。但在页面的 window.onload 上，我收到一个很好的“TypeError:moveTo.logHelloWorld 不是函数”错误。

我哪里错了？

Webpack 配置:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: ['./public/js/common.js', './public/js/moveTo.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js'
  },
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : []
}

moveTo.js

var moveTo = {};

console.log("moveTo.js loaded...");

moveTo.logHelloWorld = function(){
  console.console.log("Hello World logHelloWorld() from moveTo client Javascript!");
};

module.exports = moveTo;

moveTo.handlebars

<div>MoveTo</div>
<script type="text/javascript">
  window.onload = function(){
    console.log("ON LOAD...");
    moveTo.logHelloWorld();
  }
</script>

最后在主模板中我包含了使用 Webpack 构建的bundle.js:

<script src="/bundle.min.js" type="text/javascript"></script>

这是我得到的错误:

更新:如何使用多个客户端js文件 假设我想添加另一个 test.js 文件及其自己的模块，如下所示:

test.js

var test = {};

console.log("test.js loaded...");

test.logHelloWorld = function(){
  console.log("Hello World logHelloWorld() from TEST client Javascript!");
};

module.exports = test;

然后在Webpack配置中:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: ['./public/js/common.js', './public/js/moveTo.js', './public/js/test.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js',
    library: ["moveTo", "test"] //This is not working.
  },
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : []
}

我怎样才能让它发挥作用？

更新: 这是我使用建议的 webpack 配置得到的结果

#最后更新#

显然没有办法让一个 bundle.js 并让它与不同的 javascript 文件一起工作。这是我迄今为止在@hazardous的宝贵帮助下实现的唯一目标:

webpack.config.js

var webpack = require('webpack');
var path = require('path');
// ['./public/js/common.js', './public/js/moveTo.js', './public/js/test.js'],
module.exports = {
  entry: './public/js/t3toolbox.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js',
    library: ["t3toolbox", "[name]"]
  },
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : []
}

t3toolbox.js

var t3toolbox = {}; // Global App NameSpace
var test = require('./test.js');
var moveTo = require('./moveTo.js');

t3toolbox.moveTo = moveTo;
t3toolbox.test = test;

module.exports = t3toolbox;

moveTo.js

var moveTo = {};

console.log("moveTo.js loaded...");

moveTo.logHelloWorld = function(){
  console.log("Hello World logHelloWorld() from MOVETO client Javascript!");
};

module.exports = moveTo;

test.js

var test = {};

console.log("test.js loaded...");

test.logHelloWorld = function(){
  console.log("Hello World logHelloWorld() from TEST client Javascript!");
};

module.exports = test;

moveTo.handlebars

搬去

<script type="text/javascript">
  window.onload = function(){
    console.log("ON LOAD...");
    t3toolbox.main.moveTo.logHelloWorld();
    t3toolbox.main.test.logHelloWorld();
  }
</script>

如您所见，您仍然需要在 t3toolbox 之后使用main。我从未完成您最终得到的配置

var mylibrary = {
  moveTO: {/*...*/},
  test: {/*...*/}
}

它总是以:

var mylibrary = {
  main: {
    moveTo: {/*...*/},
    test: {/*...*/}
  }
}

Answer 1

尝试将library添加到output配置中，就像这样 -

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: ['./public/js/common.js', './public/js/moveTo.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js',
    library: 'moveTo'
  },
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : []
}

如果您的库有多个导出实体，请使用此 -

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: ['./public/js/common.js', './public/js/moveTo.js'],
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.min.js',
    library: ["mylibrary", "[name]"]
  },
  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : []
}

此示例基于https://github.com/webpack/webpack/blob/master/examples/multi-part-library/webpack.config.js#L10 .

此示例配置将创建以下形式的导出:

var mylibrary : {
    "common": {/* exports from common */},
    "moveTo": {/* exports from moveTo */}
}

因此，您可以使用 mylibrary.common、mylibrary.moveTo 等在代码中使用它们。

如果您不想将所有导入内容都集中在“mylibrary”中，则可以将library更改为 -

library:"[name]"

这将创建单独的 var moveTo = ... 和 var test = ... 导出。