dev可以正常工作，但是无论我尝试什么（类似于SO，Google，Google教程，T＆E），产品生成仍然显示空白。我本来是使用webpack-merge进行prod / dev拆分设置的，但是已经退缩尝试了一个仍然无法正常工作的最简单实现。
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(scss|css)$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
package.json
{
"name": "anubis-ui",
"version": "1.0.1",
"description": "Anubis UI",
"repository": {
"type": "git",
"url": ""
},
"main": "webpack.config.js",
"author": "ctx-nemo",
"license": "MIT",
"jest": {
"setupFiles": [
"./src/setupTests.js"
]
},
"scripts": {
"start": "webpack-dev-server --open --hot --mode development",
"build": "webpack --mode production",
"prettier": "prettier --write src/*.js src/**/*.js src/**/**/*.js",
"test": "jest 'test.js'",
"test:watch": "npm test -- --watch"
},
"dependencies": {
"axios": "^0.18.1",
"express": "^4.17.1",
"hookrouter": "^1.2.3",
"prop-types": "^15.6.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^4.3.1",
"react-transition-group": "^2.9.0"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-export-namespace-from": "^7.5.2",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "7.0.0",
"@cypress/webpack-preprocessor": "4.1.0",
"@testing-library/dom": "^5.6.1",
"@testing-library/jest-dom": "^4.0.0",
"@testing-library/react": "^8.0.9",
"@testing-library/react-hooks": "^2.0.1",
"@types/cypress-axe": "0.4.0",
"@types/jest": "24.0.15",
"@types/react": "16.8.21",
"@types/webpack": "4.4.34",
"axe-core": "3.3.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.6",
"babel-polyfill": "6.26.0",
"classnames": "^2.2.6",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"cypress": "^3.4.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^21.18.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.3.1",
"jest": "^23.6.0",
"jest-axe": "^3.1.1",
"lint-staged": "^7.3.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "^0.4.3",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"prettier": "^1.18.2",
"react-tabs": "^3.0.0",
"react-tabulator": "^0.9.1",
"react-test-renderer": "^16.9.0",
"sass-loader": "^7.2.0",
"simple-assign": "0.1.0",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "4.28.4",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.1.3",
"webpack-visualizer-plugin": "^0.1.11"
}
}
index.html（src）
<title>QBoss UI</title> </head>
index.html（内置）
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="description" content="App description">
<link rel="manifest" href="/manifest.json">
<title>QBoss UI</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="main.js"></script></body>
</html>
dist文件中填充了index.html和main.js，但它们显示为空白。
不会产生错误，唯一的警告是在尺寸限制范围内。