在webpack中加载javascript
在webpack中加载javascript
提问于 2016-02-24 02:31:34
一般来说，我对javascript dev是个新手，特别是对webpack。我想在我的项目中使用这个棋盘模块(https://github.com/oakmac/chessboardjs/)。它看起来是在导出ChessBoard对象。我的项目使用的是ES6，所以我希望能够
import { ChessBoard } from 'chessboard'
或
import ChessBoard from 'chessboard'
我知道我需要一些加载器来做这件事。我尝试用与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"}但我得到“错误:找不到模块‘棋盘’”错误。如果我用$替换ChessBoard，也是一样。不确定我做错了什么。对于我试图做的事情，expose甚至是正确的加载器吗？
这里是我的webpack配置以供参考(没有断板的棋盘暴露测试)
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [
{test: require.resolve("jquery"), loader: "expose?$!expose?jQuery"},
{test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: {presets: ['react', 'es2015']} },
/* CSS loaders */
{test: /\.css$/, loader: 'style!css'},
{test: /\.less$/, loader: 'style!css!less'},
/* font loaders for bootstrap */
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Test',
inject: false,
template: 'node_modules/html-webpack-template/index.ejs',
appMountId: 'app',
devServer: 'http://localhost:8080',
})
]
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35585392
复制相关文章
相似问题
腾讯云开发者
