我有一个同构应用程序,其中包含从已知工作项目中提取的webpack配置。它有一个带有客户端,服务器和通用文件夹的src文件夹。 react路由器正在寻找app容器。
import AppContainer from 'universal/components/App/App';
export default {
component: AppContainer,
childRoutes: [
require('./landing'),
require('./parts'),
require('./todos')
]
};
错误如下。
Error: Cannot find module 'universal/components/App/App'
webpack dev中使用的客户端开发是。
import path from 'path';
import webpack from 'webpack';
import cssModulesValues from 'postcss-modules-values';
import {getDotenv} from '../src/universal/utils/dotenv';
import HappyPack from 'happypack';
// Import .env and expand variables:
getDotenv();
const root = process.cwd();
const clientInclude = [path.join(root, 'src', 'client'), path.join(root, 'src', 'universal')];
const globalCSS = path.join(root, 'src', 'universal', 'styles', 'global');
const srcDir = path.join(root, 'src');
const prefetches = [
'universal/components/App/App.js'
];
//const prefetchPlugins = prefetches.map(specifier => new webpack.PrefetchPlugin(specifier));
const babelQuery = {
plugins: [
['transform-decorators-legacy'],
['react-transform', {
transforms: [{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react']
}]
}]
]
};
export default {
// devtool: 'source-maps',
devtool: 'eval',
context: srcDir,
entry: {
app: ['babel-polyfill', 'client/client.js', 'webpack-hot-middleware/client']
},
output: {
// https://github.com/webpack/webpack/issues/1752
filename: 'app.js',
chunkFilename: '[name]_[chunkhash].js',
path: path.join(root, 'build'),
publicPath: '/static/'
},
plugins: [
//...prefetchPlugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'__CLIENT__': true,
'__PRODUCTION__': false,
'process.env.NODE_ENV': JSON.stringify('development')
}),
new webpack.EnvironmentPlugin([
'PROTOCOL',
'HOST',
'PORT'
]),
new HappyPack({
loaders: ['babel'],
threads: 4
})
],
resolve: {
extensions: ['.js'],
modules: [srcDir, 'node_modules']
},
// used for joi validation on client
node: {
dns: 'mock',
net: 'mock'
},
postcss: [cssModulesValues],
module: {
loaders: [
{test: /\.json$/, loader: 'json-loader'},
{test: /\.txt$/, loader: 'raw-loader'},
{test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader?limit=10000'},
{test: /\.(eot|ttf|wav|mp3)$/, loader: 'file-loader'},
{
test: /\.css$/,
loader: 'style!css',
include: globalCSS
},
{
test: /\.css$/,
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!postcss',
exclude: globalCSS,
include: clientInclude
},
{
test: /\.js$/,
loader: 'happypack/loader',
query: babelQuery,
include: clientInclude
}
]
}
};
服务器webpack config
import path from 'path';
import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import cssModulesValues from 'postcss-modules-values';
import HappyPack from 'happypack';
const root = process.cwd();
const serverInclude = [path.join(root, 'src', 'server'), path.join(root, 'src', 'universal')];
const globalCSS = path.join(root, 'src', 'universal', 'styles', 'global');
const prefetches = [
];
const prefetchPlugins = prefetches.map(specifier => new webpack.PrefetchPlugin(specifier));
export default {
context: path.join(root, 'src'),
entry: {prerender: 'universal/routes/index.js'},
target: 'node',
output: {
path: path.join(root, 'build'),
chunkFilename: '[name]_[chunkhash].js',
filename: '[name].js',
libraryTarget: 'commonjs2',
publicPath: '/static/'
},
// ignore anything that throws warnings & doesn't affect the view
externals: [],
postcss: [cssModulesValues],
resolve: {
extensions: ['.js'],
modules: [path.join(root, 'src'), 'node_modules']
},
plugins: [
//...prefetchPlugins,
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}),
new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
new webpack.DefinePlugin({
'__CLIENT__': false,
'__PRODUCTION__': true,
'process.env.NODE_ENV': JSON.stringify('production')
}),
new HappyPack({
loaders: ['babel'],
threads: 4
})
],
module: {
loaders: [
{test: /\.json$/, loader: 'json-loader'},
{test: /\.txt$/, loader: 'raw-loader'},
{test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader?limit=10000'},
{test: /\.(eot|ttf|wav|mp3)$/, loader: 'file-loader'},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('fake-style', 'css?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!postcss'),
include: serverInclude,
exclude: globalCSS
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('fake-style', 'css'),
include: globalCSS
},
{
test: /\.js$/,
loader: 'happypack/loader',
include: serverInclude
}
]
}
};
可以找到来源here
谢谢。