前提・実現したいこと
sh
1create-react-app
のtsのオプションみたいなやつ(忘れた)で作成した段階で
sh
1npm run build
を実行し、
# Dockerfile FROM nginx:1.15.2
yml
1#docker-compose.yml 2version: "2" 3 4services: 5 nginx: 6 build: . 7 ports: 8 - 32000:80 9 volumes: 10 - ./build:/usr/share/nginx/html
で
sh
1docker-compose up
で32000アクセスでは動作しました。
その後webpackもろもろ入れ、webpack --watch
は動くのですが、index.htmlが生成されないので当然403です。
ついでにnpm run build
も通らなくなりました。
今自分はwebpackのオプションかなにかでindex.htmlを生成すればいいと考えていますが、その方法がわからず、
そもそもそれが正しい解決策なのかも疑問です。
どう対処するのが適切でしょうか?
ソース
package.json
json
1{ 2 "name": "xxx", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "react": "^16.4.2", 7 "react-dom": "^16.4.2", 8 "react-scripts-ts": "2.17.0" 9 }, 10 "scripts": { 11 "start": "react-scripts-ts start", 12 "build": "react-scripts-ts build", 13 "test": "react-scripts-ts test --env=jsdom", 14 "eject": "react-scripts-ts eject", 15 "wp": "webpack", 16 "watch": "webpack --watch", 17 "lint": "tslint 'src/**/*.ts{,x}'" 18 }, 19 "devDependencies": { 20 "@types/jest": "^23.3.1", 21 "@types/node": "^10.9.2", 22 "@types/react": "^16.4.11", 23 "@types/react-dom": "^16.0.7", 24 "awesome-typescript-loader": "^5.2.0", 25 "css-loader": "^1.0.0", 26 "file-loader": "^2.0.0", 27 "html-webpack-plugin": "^3.2.0", 28 "prettier": "^1.14.2", 29 "source-map-loader": "^0.2.4", 30 "tslint": "^5.11.0", 31 "tslint-config-prettier": "^1.15.0", 32 "tslint-plugin-prettier": "^1.3.0", 33 "typescript": "^3.0.1", 34 "webpack": "^4.17.1", 35 "webpack-cli": "^3.1.0" 36 } 37} 38
webpack.config.js
js
1module.exports = { 2 entry: "./src/index.tsx", 3 output: { 4 filename: "bundle.js", 5 path: __dirname + "/dist" 6 }, 7 8 // Enable sourcemaps for debugging webpack's output. 9 devtool: "source-map", 10 11 resolve: { 12 // Add '.ts' and '.tsx' as resolvable extensions. 13 extensions: [".ts", ".tsx", ".js", ".json"] 14 }, 15 16 module: { 17 rules: [ 18 // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 19 { test: /.tsx?$/, loader: "awesome-typescript-loader" }, 20 { test: /.css?$/, loader: "css-loader" }, 21 { test: /.(jpg|png|svg)?$/, loader: "file-loader" }, 22 // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 23 { enforce: "pre", test: /.js$/, loader: "source-map-loader" } 24 ] 25 }, 26 27}; 28
tsconfig.json
json
1{ 2 "compilerOptions": { 3 "baseUrl": ".", 4 "outDir": "./dist", 5 "module": "esnext", 6 "target": "es5", 7 "lib": ["es6", "dom"], 8 "sourceMap": true, 9 "allowJs": true, 10 "jsx": "react", 11 "moduleResolution": "node", 12 "forceConsistentCasingInFileNames": true, 13 "noImplicitReturns": true, 14 "noImplicitThis": true, 15 "strictNullChecks": true, 16 "suppressImplicitAnyIndexErrors": true, 17 "noUnusedLocals": true, 18 "noUnusedParameters": true 19 }, 20 "exclude": [ 21 "node_modules", 22 "build", 23 "scripts", 24 "acceptance-tests", 25 "webpack", 26 "jest", 27 "src/setupTests.ts" 28 ] 29} 30
npm run buildのエラー
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! xxx@0.1.0 build: `react-scripts-ts build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ts_react@0.1.0 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
補足情報(FW/ツールのバージョンなど)
windows 10
docker toolbox(多分最新版)
npm 5.6.0
生成されたtypescriptファイルは一切いじっていません
Docker使ってるけど結局ローカルでnpm run watch
しないといけないからdockerあんま意味なくね?みたいなのはとりあえず置いといてください
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。