小白一枚,初始使用了webpack+redux,发现编译不过求解答!
出错文件的截图:
webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var fs = require('fs');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//遍历目录
var searchDir = ['components', 'app']; //需要webpack打包的目录
var entry = {};
searchDir.forEach(function(dir) {
var srcBasePath = path.join(__dirname, './', dir);
var files = fs.readdirSync(srcBasePath);
var ignore = ['.DS_Store']; //忽略某些文件夹
files.map(function(file) {
if(ignore.indexOf(file) < 0) {
entry[dir+'/'+file] = path.join(srcBasePath, file, 'index.js');
var demofile = path.join(srcBasePath, file, 'demo.js');
if(fs.existsSync(demofile)) {
entry[dir+'/'+file+'/demo'] = demofile;
}
var reduxfile = path.join(srcBasePath, file, 'redux.js');
if(fs.existsSync(reduxfile)) {
entry[dir+'/'+file+'/redux'] = reduxfile;
}
}
});
});
console.log(entry);
Object.keys(entry).forEach(function(key) {
entry[key] = [entry[key], 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server'];
});
module.exports = {
devtool: 'eval',
entry: entry,
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/static/'
},
plugins: [
new ExtractTextPlugin("[name]/index.css"),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
include: path.join(__dirname, 'src')
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
exclude: /node_modules/
}]
}
};
出错截图:
求大神解救~~~
貌似有两个问题。
Module not found
是不是有个地方import了components/light,但你的components/light文件夹低下没有index.js,所有webpack不知道怎么import。所以在你应用components/light的代码中,显示写明要引用light低下哪一个js文件。
对于第二个问题的Module parse failed
,应该是你保存demo.js时,编辑器添加了UTF8 BOM头。可以用notepad++打开demo.js,然后转化为UTF8再保存。