質問編集履歴

エラーメッセージをもう少し追記しました。

2020/05/28 06:45

投稿

tomomo

スコア430

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,304 +8,316 @@
 /Users/xxxxxx/Workspace/example-frontside/webpack.config.ts:1
+import path from 'path';
+^^^^^^
+SyntaxError: Cannot use import statement outside a module
+    at wrapSafe (internal/modules/cjs/loader.js:1116:16)
+    at Module._compile (internal/modules/cjs/loader.js:1164:27)
+ ：
+```
+webpackの設定ファイルをTypeScriptで記述しています。
+Javascript（webpack.config.js）で同等のは正常に起動しました。
+故に何か設定が足りないものと思っているのですが、Typescriptの方で
+もし方法がありましたらあればご教授いただきたく。
+よろしくお願いします。
+※「cross-env TS_NODE_PROJECT=\"./tsconfig.json\" webpack-dev-server」とかでもダメでした。
+```
+// ファイルの配置
+┣ src
+┃ ┗ index.ts
+┣ tsconfig.json
+┣ webpack.config.ts
+┗ package.json
+```
+```json
+// package.json
+ :
+  "scripts": {
+    "start:dev": "webpack-dev-server",
+  }
+ :
+  // 関係ありそうなモジュールだけ記載。（@type/〜は省略）
+  "devDependencies": {
+    "ts-loader": "^7.0.5",
+    "ts-node": "^8.10.1",
+    "tsconfig-paths": "^3.9.0",
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.2",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+:
+```
+```typescript
+// webpack.config.ts
 import * as path from 'path';
-```
-webpackの設定ファイルをTypeScriptで記述しています。
-Javascript（webpack.config.js）で同等のは正常に起動しました。
-故に何か設定が足りないものと思っているのですが、Typescriptの方で
-もし方法がありましたらあればご教授いただきたく。
-よろしくお願いします。
-※「cross-env TS_NODE_PROJECT=\"./tsconfig.json\" webpack-dev-server」とかでもダメでした。
-```
-// ファイルの配置
-┣ src
-┃ ┗ index.ts
-┣ tsconfig.json
-┣ webpack.config.ts
-┗ package.json
-```
+import {
+  Configuration as WebpackConfiguration
+} from 'webpack';
+import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+// import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; // こちらもNG
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration;
+}
+const devServer: WebpackDevServerConfiguration = {
+  contentBase: path.resolve(__dirname, 'public'),
+  host: '0.0.0.0',
+  port: 3000,
+  disableHostCheck: true,
+  historyApiFallback: true,
+  compress: true,
+  hotOnly: true,
+  proxy: {
+    '/api': {
+      target: 'http://localhost:8080',
+    }
+  }
+};
+export default (_env: never, args: Configuration) => {
+  const mode = args.mode || 'development';
+  const config: Configuration = {
+    mode,
+    devtool: (mode === 'development') ? 'inline-source-map' : false,
+    devServer: (mode === 'development') ? devServer : undefined,
+    entry: {
+      main: './src'
+    },
+    output: {
+      publicPath: '/',
+      path: path.resolve(__dirname, './public/dist'),
+      filename: '[name].js',
+    },
+    resolve: {
+      alias: {
+        '~': path.resolve('src'),
+      },
+      extensions: [
+        '.js',
+        '.json',
+        '.ts',
+      ],
+      plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
+    },
+    module: {
+      rules: [
+        {
+          test: /.tsx?$/,
+          loader: 'ts-loader',
+          exclude: '/node_modules/',
+        },
+      ],
+    },
+  };
+  return config;
+};
+```
 ```json
-// package.json
- :
-  "scripts": {
-    "start:dev": "webpack-dev-server",
-  }
- :
-  // 関係ありそうなモジュールだけ記載。（@type/〜は省略）
-  "devDependencies": {
-    "ts-loader": "^7.0.5",
-    "ts-node": "^8.10.1",
-    "tsconfig-paths": "^3.9.0",
-    "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tslib": "^2.0.0",
-    "typescript": "^3.9.2",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
-  }
-:
-```
-```typescript
-// webpack.config.ts
-import * as path from 'path';
-import {
-  Configuration as WebpackConfiguration
-} from 'webpack';
-import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-// import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; // こちらもNG
-interface Configuration extends WebpackConfiguration {
-  devServer?: WebpackDevServerConfiguration;
+// tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "./",
+    "paths": {
+      "~/*": [
+        "src/*"
+      ]
+    },
+    "types": [
+      "@types/node"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }
-const devServer: WebpackDevServerConfiguration = {
-  contentBase: path.resolve(__dirname, 'public'),
-  host: '0.0.0.0',
-  port: 3000,
-  disableHostCheck: true,
-  historyApiFallback: true,
-  compress: true,
-  hotOnly: true,
-  proxy: {
-    '/api': {
-      target: 'http://localhost:8080',
-    }
-  }
-};
-export default (_env: never, args: Configuration) => {
-  const mode = args.mode || 'development';
-  const config: Configuration = {
-    mode,
-    devtool: (mode === 'development') ? 'inline-source-map' : false,
-    devServer: (mode === 'development') ? devServer : undefined,
-    entry: {
-      main: './src'
-    },
-    output: {
-      publicPath: '/',
-      path: path.resolve(__dirname, './public/dist'),
-      filename: '[name].js',
-    },
-    resolve: {
-      alias: {
-        '~': path.resolve('src'),
-      },
-      extensions: [
-        '.js',
-        '.json',
-        '.ts',
-      ],
-      plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })]
-    },
-    module: {
-      rules: [
-        {
-          test: /.tsx?$/,
-          loader: 'ts-loader',
-          exclude: '/node_modules/',
-        },
-      ],
-    },
-  };
-  return config;
-};
-```
+```
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    "target": "ES5",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noImplicitReturns": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": "./",
-    "paths": {
-      "~/*": [
-        "src/*"
-      ]
-    },
-    "types": [
-      "@types/node"
-    ]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}
-```