Webpack 4配置不选择index.js文件

时间:2018-06-12 13:28:42

标签: javascript reactjs webpack webpack-dev-server webpack-4

我在这做傻事。我正在使用Webpack 4&试图运行React应用程序。

我得到了html文件,但是,webpack并没有在浏览器上显示index.js文件的内容。我检查了产品。建设和它确实包含react <hello />组件代码,但它不会在浏览器中显示(也不显示在index.js中执行的console.log)。

目录结构:

enter image description here

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();

谢谢,

0 个答案:

没有答案