我得到了html文件,但是,webpack并没有在浏览器上显示index.js文件的内容。我检查了产品。建设和它确实包含react <hello />
组件代码,但它不会在浏览器中显示(也不显示在index.js中执行的console.log)。
目录结构:
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const baseConfig = {
context: path.resolve(__dirname, "src"),
entry: "./index.js",
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/",
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "../build/index.html",
})
]
};
const devConfig = {
mode: "development",
devtool: "source-map",
devServer: {
historyApiFallback: true,
hot: true,
compress: false,
port: 1111,
publicPath: "http://localhost:1111/"
}
};
module.exports = (env, argv) => {
if (argv.mode === "development") {
return merge(baseConfig, devConfig);
}
return merge(baseConfig, prodConfig);
};
index.js:
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import Hello from "./components/Hello"; // temp
const initialiseApp = () => {
const appContainer = document.getElementById("app");
console.log("hello");
render(
<Provider store={store}>
<Hello />
</Provider>,
appContainer
);
};
initialiseApp();
谢谢,