我有一个模块a如下,模块a是使用web包捆绑,它包括模块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(在Common文件夹下: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从common文件夹移动到modules文件夹,因为它现在是一个入口点(从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文件夹中,因为我们把它作为入口点。
"显然我不想在moduleB中加载我的highchairs lib,因为它不是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;
*这是一个概括——你可以有多个入口点,但它们必须是独立的——它们绝对不能相互导入。