Home>
create-react-app


At the stage where it was created with a ts option like (forgot)

npm run build


And

# Dockerfile
FROM nginx: 1.15.2
# docker-compose.yml
version: "2"
services:
  nginx:
    build:.
    ports:
      -32000: 80
    volumes:
      -./build:/usr/share/nginx/html


At

docker-compose up


It worked with 32000 access.
After that,webpack --watchworks, but naturally it is 403 because index.html is not generated.
Incidentally,npm run buildcan no longer pass.

I'm thinking I should generate index.html with some webpack options, but I don't know how to do that.
In the first place, it is questionable whether it is the right solution.
How is it appropriate to deal with it?

Source

package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^ 16.4.2",
    "react-dom": "^ 16.4.2",
    "react-scripts-ts": "2.17.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env = jsdom",
    "eject": "react-scripts-ts eject",
    "wp": "webpack",
    "watch": "webpack --watch",
    "lint": "tslint 'src/**/*. ts {, x}'"
  },
  "devDependencies": {
    "@ types/jest": "^ 23.3.1",
    "@ types/node": "^ 10.9.2",
    "@ types/react": "^ 16.4.11",
    "@ types/react-dom": "^ 16.0.7",
    "awesome-typescript-loader": "^ 5.2.0",
    "css-loader": "^ 1.0.0",
    "file-loader": "^ 2.0.0",
    "html-webpack-plugin": "^ 3.2.0",
    "prettier": "^ 1.14.2",
    "source-map-loader": "^ 0.2.4",
    "tslint": "^ 5.11.0",
    "tslint-config-prettier": "^ 1.15.0",
    "tslint-plugin-prettier": "^ 1.3.0",
    "typescript": "^ 3.0.1",
    "webpack": "^ 4.17.1",
    "webpack-cli": "^ 3.1.0"
  }
}

webpack.config.js

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/ dist"
  },
  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",
  resolve: {// Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {test: /\.tsx?$/, loader: "awesome-typescript-loader"},
      {test: /\.css?$/, loader: "css-loader"},
      {test: /\.(jpg|png|svg)?$/, loader: "file-loader"},
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {enforce: "pre", test: /\.js$/, loader: "source-map-loader"}
    ]
  },
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

npm run build error

D: \ xxx \ node_modules \ webpack \ lib \ Chunk.js: 829
                throw new Error ("Chunk.entrypoints: Use Chunks.addGroup instead");
                ^
Error: Chunk.entrypoints: Use Chunks.addGroup instead
    at Chunk.set (D: \ xxx \ node_modules \ webpack \ lib \ Chunk.js: 829: 9)
    at D: \ xxx \ node_modules \ extract-text-webpack-plugin \ dist \ index.js: 176: 40
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous>(D: \ xxx \ node_modules \ extract-text-webpack-plugin \ dist \ index.js: 171: 18)
    at Compilation.applyPluginsAsyncSeries (D: \ xxx \ node_modules \ tapable \ lib \ Tapable.js: 206: 13)
    at Compilation.seal (D: \ xxx \ node_modules \ react-scripts-ts \ node_modules \ webpack \ lib \ Compilation.js: 605: 8)
    at applyPluginsParallel.err (D: \ xxx \ node_modules \ react-scripts-ts \ node_modules \ webpack \ lib \ Compiler.js: 508: 17)
    at D: \ xxx \ node_modules \ tapable \ lib \ Tapable.js: 289: 11
    at _addModuleChain (D: \ xxx \ node_modules \ react-scripts-ts \ node_modules \ webpack \ lib \ Compilation.js: 507: 11)
    at processModuleDependencies.err (D: \ xxx \ node_modules \ react-scripts-ts \ node_modules \ webpack \ lib \ Compilation.js: 477: 14)
    at _combinedTickCallback (internal/process/next_tick.js: 131: 7)
    at process._tickCallback (internal/process/next_tick.js: 180: 9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts-ts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm.There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C: \ Users \ xxx \ AppData \ Roaming \ npm-cache \ _logs \ 2018-08-26T09_33_44_093Z-debug.log
Supplemental information (FW/tool version etc.)

windows 10
docker toolbox (maybe the latest version)
npm 5.6.0

The generated typescript file hasn't been tampered with at all
I'm using Docker, but after all, I have to donpm run watchlocally, so docker doesn't make much sense? Please leave anything like

  • Answer # 1

    Fornpm run build
    https://github.com/webpack-contrib/extract-text-webpack-plugin
    Solved by

    Corresponding

    Once at firstnpm run build

    npm run watch

    Change generated index.html to read js generated by webpack

    After that, onlynpm run watchreflects the remote country