Karma 失败 - 模块解析失败
Karma fail - Module parse failed
尝试在 reactJs 应用程序上将 Mocha 框架与 Karma Runner 结合使用。
出于某种原因,我收到以下错误消息:
Module parse failed: C:\Dev\marvel-memory-card-v2\src\index.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
Uncaught Error: Cannot find module "./index.scss" at tests.webpack.js:22214
因为一切对我来说都是全新的。不知道如何解决这个问题。
这是我的 webpack.config 个文件:
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";
// global css
loaders.push({
test: /\.css$/,
exclude: /[\/\]src[\/\]/,
loaders: [
'style?sourceMap',
'css'
]
});
// local scss modules
loaders.push({
test: /\.scss$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
'postcss',
'sass'
]
});
// local css modules
loaders.push({
test: /\.css$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap'
]
});
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.jsx' // your app's entry point
],
devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
output: {
publicPath: '/',
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders
},
devServer: {
contentBase: "./public",
// do not print bundle build stats
noInfo: true,
// enable HMR
hot: true,
// embed the webpack-dev-server runtime into the bundle
inline: true,
// serve index.html in place of 404 responses to allow HTML5 history
historyApiFallback: true,
port: PORT,
host: HOST
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new HtmlWebpackPlugin({
template: './src/template.html'
}),
]
};
和karma.conf文件
var webpack = require('webpack');
module.exports = function (config) {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack']
},
reporters: ['dots'],
webpack: {
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
]
},
watch: true
},
webpackServer: {
noInfo: true
}
});
};
有什么办法可以解决我的问题吗?请告诉我。
非常感谢
尝试将此行添加到您的业力配置中:
basePath : __dirname + '/',
这是 webpack 的 scss 加载器:
{
test: /\.scss$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
'postcss',
'sass'
]
}
因此您的文件应如下所示:
module.exports = function (config) {
config.set({
basePath : __dirname + '/',
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack']
},
reporters: ['dots'],
webpack: {
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
{
test: /\.scss$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
'postcss',
'sass'
]
}
]
},
watch: true
},
webpackServer: {
noInfo: true
}
});
};
尝试在 reactJs 应用程序上将 Mocha 框架与 Karma Runner 结合使用。 出于某种原因,我收到以下错误消息:
Module parse failed: C:\Dev\marvel-memory-card-v2\src\index.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
Uncaught Error: Cannot find module "./index.scss" at tests.webpack.js:22214
因为一切对我来说都是全新的。不知道如何解决这个问题。
这是我的 webpack.config 个文件:
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "8888";
// global css
loaders.push({
test: /\.css$/,
exclude: /[\/\]src[\/\]/,
loaders: [
'style?sourceMap',
'css'
]
});
// local scss modules
loaders.push({
test: /\.scss$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
'postcss',
'sass'
]
});
// local css modules
loaders.push({
test: /\.css$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap'
]
});
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.jsx' // your app's entry point
],
devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
output: {
publicPath: '/',
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders
},
devServer: {
contentBase: "./public",
// do not print bundle build stats
noInfo: true,
// enable HMR
hot: true,
// embed the webpack-dev-server runtime into the bundle
inline: true,
// serve index.html in place of 404 responses to allow HTML5 history
historyApiFallback: true,
port: PORT,
host: HOST
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new HtmlWebpackPlugin({
template: './src/template.html'
}),
]
};
和karma.conf文件
var webpack = require('webpack');
module.exports = function (config) {
config.set({
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack']
},
reporters: ['dots'],
webpack: {
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
]
},
watch: true
},
webpackServer: {
noInfo: true
}
});
};
有什么办法可以解决我的问题吗?请告诉我。 非常感谢
尝试将此行添加到您的业力配置中:
basePath : __dirname + '/',
这是 webpack 的 scss 加载器:
{
test: /\.scss$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
'postcss',
'sass'
]
}
因此您的文件应如下所示:
module.exports = function (config) {
config.set({
basePath : __dirname + '/',
browsers: ['Chrome'],
singleRun: true,
frameworks: ['mocha'],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': ['webpack']
},
reporters: ['dots'],
webpack: {
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
{
test: /\.scss$/,
exclude: /[\/\](node_modules|bower_components|public\/)[\/\]/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]&sourceMap',
'postcss',
'sass'
]
}
]
},
watch: true
},
webpackServer: {
noInfo: true
}
});
};