[英]Webpack isn't loading the app in index.html after build , no code in the build.js file
應用程序在開發模式下運行良好。 但是，Index.html 在構建后是空的，不顯示任何內容。
這是我的App.jsx
function App() {
return (
<Router>
<Header />
<Switch>
<Route path="/" exact component={Register} />
{/* <Register />
</Route> */}
<Route path="/register" exact>
<Register />
</Route>
<Route path="/login" exact>
<Login />
</Route>
<Route path="/admin" exact>
<Dashboard />
</Route>
<Route exact path="/:admin/all" component={AllEvents} />
<Route exact path="/event/book" render={(props) => <BookAppointment {...props} />} />
</Switch>
</Router>
);
}
export default App;
Webpack.common.js
const ESLintPlugin = require('eslint-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.jsx',
plugins: [new ESLintPlugin()],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: ['babel-loader'],
},
{
test: /\.html$/,
use: ['html-loader'],
},
{
test: /\.(svg|png|jpg|jpeg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
ouputPath: 'images',
},
},
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
};
Webpack.dev.js
const common = require('./webpack.common');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
module.exports = merge(common, {
devtool: 'source-map',
mode: 'development',
output: {
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
module: {
rules: [
{
test: /\.scss$/, // regular expression /regex/
use: [
'style-loader', // 3. Injects styles into the dom
'css-loader', //2. compiles css into javascript
'sass-loader', //1. compiles sass to css
// it's basically style-loader(css-loader(sass-loader))
],
},
],
},
devServer: {
open: true,
overlay: true,
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:5000/',
pathRewrite: { '^/api': '' },
},
},
},
});
webpack.prod.js
const path = require('path');
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
output: {
// where and in what name webpack bundle the code
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'build'),
publicPath: '/',
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
},
}),
],
},
module: {
rules: [
{
test: /\.scss$/, // regular expression /regex/
use: [
MiniCssExtractPlugin.loader, // 3. spits a new file
'css-loader', //2. compiles css into javascript
'sass-loader', //1. compiles sass to css
// basically style-loader(css-loader(sass-loader))
],
},
],
},
plugins: [
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
new CleanWebpackPlugin({ verbose: true }),
],
});
這是我的 index.html 構建后
<!DOCTYPE html><html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href="data:;base64,iVBORw0KGgo="><title>The Scheduling App</title>
<link href=/main.e69f506daaac63b46b38.css rel=stylesheet></head>
<body>
<div id=app></div>
<script src=/main.5dcc8eebb9a160f1b5e4.js>
</script>
</body>
</html>
這是我的 package.json
{
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/eslint-parser": "^7.11.5",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.11.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.21.4",
"eslint-plugin-react-hooks": "^4.1.2",
"eslint-webpack-plugin": "^2.1.0",
"file-loader": "^6.1.1",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.0.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass-loader": "^10.0.3",
"style-loader": "^2.0.0",
"webpack": "^5.1.0",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.2.0"
},
"dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"regenerator-runtime": "^0.13.7"
}
}
我究竟做錯了什么？ 是依賴性問題嗎？ Webpack 在我嘗試構建時發出此警告
** [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning：optimizeChunkAssets 已棄用（改用 Compilation.hook.processAssets 並使用 Compilation.PROCESS_ASSETS_STAGE_* 之一作為階段選項）（使用node --trace-deprecation...顯示警告的創建位置）（ node:160318) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets 將在未來被凍結，所有修改都被棄用。
**
謝謝！
webpack@v5 更新有很多工作要做。
您可以測試和使用 webpack 插件的預發布 alpha 版本，例如Jan Nicklas建議的html-wepack-plugin 。 那里也提到了一些 webpack 阻塞問題。
webpack@v5 發生了驚人的更新，你可以在這里閱讀更多。 我希望您的反饋能使 webpack 和 webpack-plugins 的發布和改進更快。
帶有 Webpack 的 VanillaJs，構建后無法在 index.html 中加載 bundle.js
[英]VanillaJs with Webpack, can't load bundle.js in index.html after build
為什么fs無法在node.js應用程序中加載index.html文件？
[英]Why isn't fs loading my index.html file in my node.js application?
Vue.js / Webpack 使用 CSS 和 JS 的“靜態”子域構建“index.html”
[英]Vue.js / Webpack build “index.html” using a “static” subdomain for CSS and JS
Webpack Build 生成 index.html 但在瀏覽器中加載時為空白
[英]Webpack Build generates index.html but blank when loaded in browser
如何使用 webpack 更改 index.html 文件的 build 文件夾中的路徑？
[英]how to change the path in the build folder of index.html file using webpack?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.