我正在将一些npm脚本移植到Webpack加载程序，以便更好地了解Webpack的工作原理，除了我的Mocha测试外，我的所有工作都正常:我有一个测试失败，但它并没有显示Mocha正在使用mocha-loader或测试失败:
我需要做些什么才能让所有src/**/*.test.js个文件在Webpack中与Mocha一起运行？
npm test查看测试应该如何工作npm run dev查看测试如何不使用Webpack运行Mocha loader不会在构建时运行测试，它用于创建一个专门包含测试的包，然后可以从浏览器中运行.
我建议为您的测试创建一个单独的webpack配置文件，然后您可以将其托管在使用不同于应用程序端口的webpack dev服务器上.这里有一个例子，或多或少是我在自己的项目中使用的模式(在写这个答案时):
module.exports = {
entry: 'mocha!./测试/索引.js',
output: {
filename: 'test.build.js',
path: 'tests/',
publicPath: 'http://' + hostname + ':' + port + '/tests'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader']
},
{
test: /(\.css|\.less)$/,
loader: 'null-loader',
exclude: [
/build/
]
},
{
test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
loader: 'null-loader'
}
]
},
devServer: {
host: hostname,
port: port
}
};
// This will search for files ending in .test.js and require them
// so that they are added to the webpack bundle
var context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;
"scripts": {
"test": "find ./ -name '*.test.js' | xargs mocha -R min -r babel/register",
"devtest": "webpack-dev-server --config 网页包.测验.配置.js",
"dev": "webpack-dev-server --config webpack.config.js"
}
<!DOCTYPE html>
<html>
<head>
<title>Mocha</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
<script src="/tests/test.build.js"></script>
</head>
<body>
</body>
</html>
然后运行npm run devtest，打开http://localhost:<port you picked>/webpack-dev-server/测验html，摩卡应该运行您的测试.
如果你的模块不需要CSS/LESS或图像，你可以从网页包.测验.配置.js个加载程序中删除这些加载程序.
启用热加载后，这是一个非常好的设置，因为我可以让我的应用程序和测试在不同的浏览器选项卡中运行，然后更新我的代码，看到我的更改和测试立即重新运行.
您还可以通过命令行运行npm run test来执行相同的测试.
希望这有帮助.