在网页包中加载javascript

我一般不熟悉javascript开发，尤其是网页包。我想在我的项目中使用这个棋盘模块（）。它似乎正在导出棋盘对象。我的项目使用ES6，所以我希望能够

从“棋盘”导入{ChessBoard}

或

从“棋盘”导入棋盘

我知道我需要某种装载机。我尝试了添加expose loader，方法与我在jQuery中使用它的方法相同

{test: require.resolve("jquery"), loader: "expose?$!expose?jQuery"},
{test: require.resolve("chessboard"), loader: "expose?ChessBoard!./vendor/chessboard/js/chessboard-0.3.0.min.js"}

但我得到“错误：找不到模块‘棋盘’”错误。如果我用$替换棋盘也是一样的。不知道我做错了什么。expose是我要做的事情的正确加载程序吗

这是我的网页配置，仅供参考（不含破格棋盘暴露测试）

var path=require（'path'）；
var HtmlWebpackPlugin=require（'html-webpack-plugin'）
module.exports={
条目：['webpack/hot/dev server'，path.resolve（\uu dirname，'app/main.js'），
输出：{
path:path.resolve（uu dirname，'build'），
文件名：“bundle.js”，
},
模块：{
装载机：[
{test:require.resolve（“jquery”），加载程序：“expose？$！expose？jquery”}，
{test:/\.jsx？$/，exclude:/（node_modules | bower_components）/，loader:'babel'，query:{presets:['react'，es2015']}，
/*CSS加载程序*/
{test:/\.css$/，加载程序：'style！css'}，
{test:/\.less$/，加载程序：'style！css！less'}，
/*用于引导的字体加载程序*/
{test://\（woff | woff2）（\？v=\d+\.\d+\.\d+？$/，加载器：'url？limit=10000&mimetype=application/font-woff'}，
{test://\.ttf（\？v=\d+\.\d+\.\d+？$/，加载器：'url？limit=10000&mimetype=application/octet stream'}，
{test://\.eot（\？v=\d+\.\d+\.\d+？$/，加载程序：'file'}，
{test://\.svg（\？v=\d+\.\d+\.\d+？$/，加载器：'url？limit=10000&mimetype=image/svg+xml'}，
],
},
插件：[
新HtmlWebpackPlugin({
标题:"测试",，
注：错，
模板：“node_modules/html网页包模板/index.ejs”，
appMountId:“应用程序”，
devServer:'http://localhost:8080',
})
]
};

如果看不到整个webpack.config.js文件，很难说出问题所在。基本上，您需要告诉webpack将“/node\u modules/”包含到它为js模块查找的路径列表中

您需要在

webpack.config.js

的

resolve

部分添加类似的内容

 modulesDirectories: ["node_modules"]

---

问题似乎在于chessboard.js只是一个匿名函数，而不是AMD或CommonJS模块，您可能需要考虑使用webpack添加垫片

并非所有JS文件都可以直接与webpack一起使用。文件可能是 以不受支持的模块格式，甚至不是任何模块格式。

---

我想您的webpack.config.js中需要类似的内容：

...
       resolve: {
            modules: [
                'node_modules',
                path.join( __dirname, 'node_modules' ),
                path.resolve( './src' ),
...

---

你必须做两件事：

1.）在插件下添加：

new webpack.ProvidePlugin({
   "window['jQuery']": "jquery"
})

2.）安装

脚本加载程序

插件并按如下方式导入脚本：

import 'script-loader!./chessboard.js';

---

我已经有NPM包加载刚刚好。我试图加载的模块是作为源代码分发的，而不是作为包分发的。我将发布我的整个网页配置。您是否尝试在

import

语句中包含路径？基本上，您需要告诉网页将路径添加到您要导入的代码所在的位置。所以它知道去哪里找，我知道。如何操作？当您从“ChessBoard”导入ChessBoard时，它必须位于

节点_modules

下，或者位于您在

webpack.config.js

中指定的

resolve.root

文件夹中