我使用的是Reach Router 1.2.1,到目前为止,它可以在开发模式下工作。
但是,如果我这样做yarn build
,该页面将为空白,并且不会出现错误(在Google Chrome中)。
这是我的webpack配置:
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
);
module.exports = (env = {}) => {
const config = {
entry: ['./src/main.less', './src/polyfill.js', './src/main.jsx'],
output: {
path: path.resolve(__dirname, `./html/${env.branch || 'master'}`),
filename: 'kt-reactapp.js',
library: 'ktReactApp',
libraryExport: 'default',
libraryTarget: 'umd',
},
mode: env.mode || 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx', '.css', '.sass', '.scss', '.less'],
},
plugins: [
new CopyWebpackPlugin([
{ from: 'dev/static/', to: 'static/' },
'dev/index.html',
]),
],
module: {
rules: [
{
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.less$/i,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS
options: {
sourceMap: true,
import: false,
},
},
{
loader: 'less-loader', // compiles Less to CSS
options: {
sourceMap: true,
javascriptEnabled: true,
outputStyle: env === 'production' ? 'compressed' : 'nested',
modifyVars: themeVariables,
},
},
],
},
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
},
},
{
loader: 'file-loader',
},
],
},
{
test: /\.(svg)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
],
},
watchOptions: {
poll: 2000,
ignored: ['/node_modules/'],
},
devServer: {
contentBase: path.resolve(__dirname, './dev/'),
watchContentBase: true,
disableHostCheck: true,
host: '127.0.0.1',
port: 8000,
// public: process.env.webpack_public_address || null,
overlay: true,
},
};
if (env.mode === 'development') {
config.entry.unshift(
'webpack/hot/only-dev-server',
'react-hot-loader/patch'
);
config.resolve.alias = { 'react-dom': '@hot-loader/react-dom' };
config.module.rules.unshift({
enforce: 'pre',
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
failOnError: env.mode === 'production',
},
});
}
if (env.analyze === 'true') {
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
})
);
}
return config;
};
有人可以帮忙吗?