teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問webpackを使用した時のimportの方法がわからなくて困っています。

編集履歴

質問編集履歴

23

修正

2021/09/27 00:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- (追記)
5
+ (追記)経緯としてはscript srcで使っていたものを、webpackを使用してimportを使うように切替したいです。
6
6
 
7
- 経緯としてはscript srcで使っていたものを、webpackを使用してimportを使うように切替したいです。
7
+
8
8
 
9
9
 
10
10
 

22

修正

2021/09/27 00:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
  "style-loader": "^3.3.0",
94
94
 
95
- "webpack": "^5.9.0"
95
+ "webpack": "^5.9.0",
96
96
 
97
97
  "webpack-cli": "^4.8.0"
98
98
 

21

修正

2021/09/27 00:54

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,10 @@
1
1
  初歩的な質問ですみませんが、webpackを使用した時のimportの方法がわからなくて困っています。
2
+
3
+
4
+
5
+ (追記)
6
+
7
+ 経緯としてはscript srcで使っていたものを、webpackを使用してimportを使うように切替したいです。
2
8
 
3
9
 
4
10
 

20

修正

2021/09/27 00:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -15,8 +15,6 @@
15
15
  ブラウザで実行するとエラーしてしまいました。
16
16
 
17
17
  ```Console
18
-
19
- Failed to load resource: the server responded with a status of 404 (Not Found) : bundel.js(webpackでbundleしたファイル)
20
18
 
21
19
  Uncaught SyntaxError: Cannot use import statement outside a module : index.js(importを実行したファイル)
22
20
 

19

修正

2021/09/27 00:30

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,16 @@
11
11
  "/wwwroot/js/bundle.js"が作成されました。
12
12
 
13
13
 
14
+
15
+ ブラウザで実行するとエラーしてしまいました。
16
+
17
+ ```Console
18
+
19
+ Failed to load resource: the server responded with a status of 404 (Not Found) : bundel.js(webpackでbundleしたファイル)
20
+
21
+ Uncaught SyntaxError: Cannot use import statement outside a module : index.js(importを実行したファイル)
22
+
23
+ ```
14
24
 
15
25
 
16
26
 

18

修正

2021/09/27 00:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -11,12 +11,6 @@
11
11
  "/wwwroot/js/bundle.js"が作成されました。
12
12
 
13
13
 
14
-
15
- しかし、webpackを使用した時、npm run wbpをするとエラーしてしまいました。
16
-
17
-
18
-
19
- importするために、package.jsonとwebpack.config.jsに設定しているのですが、どこが間違えているかわからなく。
20
14
 
21
15
 
22
16
 
@@ -40,9 +34,7 @@
40
34
 
41
35
  "scripts": {
42
36
 
43
- "test": "echo \"Error: no test specified\" && exit 1",
37
+ "test": "echo \"Error: no test specified\" && exit 1"
44
-
45
- "wbp": "webpack wwwroot/source/app.js wwwroot/dist/bundle.js"
46
38
 
47
39
  },
48
40
 
@@ -68,9 +60,7 @@
68
60
 
69
61
  "luxon": "^2.0.2",
70
62
 
71
- "vue": "^3.2.9",
63
+ "vue": "^3.2.9"
72
-
73
- "webpack": "^5.9.0"
74
64
 
75
65
  },
76
66
 
@@ -87,6 +77,8 @@
87
77
  "css-loader": "^6.3.0",
88
78
 
89
79
  "style-loader": "^3.3.0",
80
+
81
+ "webpack": "^5.9.0"
90
82
 
91
83
  "webpack-cli": "^4.8.0"
92
84
 
@@ -170,13 +162,7 @@
170
162
 
171
163
  exclude: /node_modules/,
172
164
 
173
- use: [
174
-
175
- "style-loader",
165
+ use: [ "style-loader", "css-loader" ]
176
-
177
- "css-loader"
178
-
179
- ]
180
166
 
181
167
  }
182
168
 
@@ -187,17 +173,3 @@
187
173
  }
188
174
 
189
175
  ```
190
-
191
-
192
-
193
- npm run wbpをするとエラーしてしまいました。
194
-
195
-
196
-
197
- ```Console
198
-
199
- Module not found: Error: Can't resolve 'wwwroot/source/app.js' in '..'
200
-
201
- Did you mean './wwwroot/source/app.js'?
202
-
203
- ```

17

修正

2021/09/27 00:19

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -128,7 +128,7 @@
128
128
 
129
129
  resolve: {
130
130
 
131
- extensions: [".js", ".ts",".css", ".vue"],
131
+ extensions: [".js", ".ts", ".css", ".vue"],
132
132
 
133
133
  alias: {
134
134
 

16

修正

2021/09/27 00:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,11 @@
12
12
 
13
13
 
14
14
 
15
- しかし、webpackを使用した時、どうやってimportをするのか方法がわからなく。
15
+ しかし、webpackを使用した時、npm run wbpをするとエラーしてしまいました。
16
+
17
+
18
+
19
+ importするために、package.jsonとwebpack.config.jsに設定しているのですが、どこが間違えているかわからなく。
16
20
 
17
21
 
18
22
 
@@ -186,56 +190,14 @@
186
190
 
187
191
 
188
192
 
189
- 名前を指定して、importをするとエラーしました。
193
+ npm run wbpをするとエラーしてしまいました。
190
-
191
-
192
-
194
+
195
+
196
+
193
- ```javascript
197
+ ```Console
198
+
194
-
199
+ Module not found: Error: Can't resolve 'wwwroot/source/app.js' in '..'
200
+
195
- import Vue from "vue";
201
+ Did you mean './wwwroot/source/app.js'?
196
-
197
-
198
-
199
- const app = Vue.createApp({
200
-
201
-
202
-
203
- });
204
-
205
-
206
-
207
- app.mount("#app");
208
202
 
209
203
  ```
210
-
211
-
212
-
213
- こちらの方法でも同じエラーでした。
214
-
215
-
216
-
217
- ```javascript
218
-
219
- import createApp from "vue";
220
-
221
-
222
-
223
- const app = createApp({
224
-
225
-
226
-
227
- });
228
-
229
-
230
-
231
- app.mount("#app");
232
-
233
- ```
234
-
235
-
236
-
237
- ```console
238
-
239
- Uncaught SyntaxError: Cannot use import statement outside a module
240
-
241
- ```

15

修正

2021/09/27 00:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,9 +26,27 @@
26
26
 
27
27
  {
28
28
 
29
+ "name": "xxx",
30
+
29
31
  "version": "1.0.0",
30
32
 
33
+ "description": "",
34
+
35
+ "main": "index.js",
36
+
37
+ "scripts": {
38
+
39
+ "test": "echo \"Error: no test specified\" && exit 1",
40
+
41
+ "wbp": "webpack wwwroot/source/app.js wwwroot/dist/bundle.js"
42
+
43
+ },
44
+
45
+ "keywords": [],
46
+
47
+ "author": "",
48
+
31
- "name": "xxx",
49
+ "license": "ISC",
32
50
 
33
51
  "dependencies": {
34
52
 
@@ -46,7 +64,9 @@
46
64
 
47
65
  "luxon": "^2.0.2",
48
66
 
49
- "vue": "^3.2.9"
67
+ "vue": "^3.2.9",
68
+
69
+ "webpack": "^5.9.0"
50
70
 
51
71
  },
52
72
 
@@ -64,8 +84,6 @@
64
84
 
65
85
  "style-loader": "^3.3.0",
66
86
 
67
- "webpack": "^5.9.0",
68
-
69
87
  "webpack-cli": "^4.8.0"
70
88
 
71
89
  }
@@ -84,17 +102,19 @@
84
102
 
85
103
  const path = require("path");
86
104
 
105
+ const webpack = require("webpack");
106
+
87
107
 
88
108
 
89
109
  module.exports = {
90
110
 
91
- entry: path.join(__dirname, "wwwroot", "js", "site.js"),
111
+ entry: path.join(__dirname, "wwwroot", "source", "app.js"),
92
112
 
93
113
  output: {
94
114
 
95
- path: path.join(__dirname, "wwwroot", "js"),
115
+ path: path.join(__dirname, "wwwroot", "dist"),
96
-
116
+
97
- filename: "bundle.js"
117
+ filename: "bundle.js" // filename: "../wwwroot/js/bundle.js"
98
118
 
99
119
  },
100
120
 
@@ -104,7 +124,7 @@
104
124
 
105
125
  resolve: {
106
126
 
107
- extensions: [".js", ".css", ".vue"],
127
+ extensions: [".js", ".ts",".css", ".vue"],
108
128
 
109
129
  alias: {
110
130
 
@@ -112,7 +132,7 @@
112
132
 
113
133
  "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.min.js",
114
134
 
115
- "ag-grid-vue3$": "ag-grid-vue/dist/ag-grid-vue3.umd.min.js",
135
+ "ag-grid-vue$": "ag-grid-vue/dist/ag-grid-vue3.umd.min.js",
116
136
 
117
137
  "axios$": "axios/dist/axios.min.js",
118
138
 
@@ -154,16 +174,6 @@
154
174
 
155
175
  ]
156
176
 
157
- },
158
-
159
- {
160
-
161
- test: /.js$/,
162
-
163
- exclude: /node_modules/,
164
-
165
- loader: "babel-loader"
166
-
167
177
  }
168
178
 
169
179
  ],

14

2021/09/26 23:57

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -206,7 +206,7 @@
206
206
 
207
207
  ```javascript
208
208
 
209
- import create from "vue";
209
+ import createApp from "vue";
210
210
 
211
211
 
212
212
 

13

2021/09/25 07:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  "dependencies": {
34
34
 
35
- "ag-grid-community": "^26.0.1",
35
+ "ag-grid-enterprise": "^26.0.1",
36
36
 
37
37
  "ag-grid-vue3": "^26.0.1",
38
38
 

12

修正

2021/09/25 07:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -104,7 +104,7 @@
104
104
 
105
105
  resolve: {
106
106
 
107
- extensions: [".js", ".vue"],
107
+ extensions: [".js", ".css", ".vue"],
108
108
 
109
109
  alias: {
110
110
 

11

修正

2021/09/24 23:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -88,58 +88,54 @@
88
88
 
89
89
  module.exports = {
90
90
 
91
- entry: {
92
-
93
- index: path.join(__dirname, "wwwroot", "js", "site.js")
91
+ entry: path.join(__dirname, "wwwroot", "js", "site.js"),
92
+
93
+ output: {
94
+
95
+ path: path.join(__dirname, "wwwroot", "js"),
96
+
97
+ filename: "bundle.js"
94
98
 
95
99
  },
96
100
 
97
- output: {
98
-
99
- path: path.join(__dirname, "wwwroot", "js"),
100
-
101
- filename: "bundle.js"
101
+ devtool: "source-map",
102
+
103
+ mode: "development",
104
+
105
+ resolve: {
106
+
107
+ extensions: [".js", ".vue"],
108
+
109
+ alias: {
110
+
111
+ "vue$": "vue/dist/vue.global.js",
112
+
113
+ "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.min.js",
114
+
115
+ "ag-grid-vue3$": "ag-grid-vue/dist/ag-grid-vue3.umd.min.js",
116
+
117
+ "axios$": "axios/dist/axios.min.js",
118
+
119
+ "bootstrap$": "bootstrap/dist/js/bootstrap.min.js",
120
+
121
+ "chart.js$": "chart.js/dist/chart.min/js",
122
+
123
+ "file-saver$": "file-saver/dist/FileSaver.min.js",
124
+
125
+ "luxon$": "luxon/src/luxon.js",
126
+
127
+
128
+
129
+ "bootstrap-css$": "bootstrap/dist/css/bootstrap.min.css",
130
+
131
+ "ag-grid-enterprise-css$": "ag-grid-enterprise/dist/styles/ag-grid.min.css",
132
+
133
+ "ag-grid-enterprise-ag-theme-balham-css$": "ag-grid-enterprise/dist/styles/ag-theme-balham.min.css",
134
+
135
+ },
102
136
 
103
137
  },
104
138
 
105
- devtool: "source-map",
106
-
107
- mode: "development",
108
-
109
- resolve: {
110
-
111
- extensions: [".js", ".vue"],
112
-
113
- alias: {
114
-
115
- "vue$": "vue/dist/vue.global.js",
116
-
117
- "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.min.js",
118
-
119
- "ag-grid-vue3$": "ag-grid-vue/dist/ag-grid-vue3.umd.min.js",
120
-
121
- "axios$": "axios/dist/axios.min.js",
122
-
123
- "bootstrap$": "bootstrap/dist/js/bootstrap.min.js",
124
-
125
- "chart.js$": "chart.js/dist/chart.min/js",
126
-
127
- "file-saver$": "file-saver/dist/FileSaver.min.js",
128
-
129
- "luxon$": "luxon/src/luxon.js",
130
-
131
-
132
-
133
- "bootstrap-css$": "bootstrap/dist/css/bootstrap.min.css",
134
-
135
- "ag-grid-enterprise-css$": "ag-grid-enterprise/dist/styles/ag-grid.min.css",
136
-
137
- "ag-grid-enterprise-ag-theme-balham-css$": "ag-grid-enterprise/dist/styles/ag-theme-balham.min.css",
138
-
139
- },
140
-
141
- },
142
-
143
139
  module: {
144
140
 
145
141
  rules: [

10

修正

2021/09/24 23:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -180,7 +180,7 @@
180
180
 
181
181
 
182
182
 
183
- 名前を指定して、importをするとエラーがしました。
183
+ 名前を指定して、importをするとエラーしました。
184
184
 
185
185
 
186
186
 

9

修正

2021/09/24 23:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -204,6 +204,30 @@
204
204
 
205
205
 
206
206
 
207
+ こちらの方法でも同じエラーでした。
208
+
209
+
210
+
211
+ ```javascript
212
+
213
+ import create from "vue";
214
+
215
+
216
+
217
+ const app = createApp({
218
+
219
+
220
+
221
+ });
222
+
223
+
224
+
225
+ app.mount("#app");
226
+
227
+ ```
228
+
229
+
230
+
207
231
  ```console
208
232
 
209
233
  Uncaught SyntaxError: Cannot use import statement outside a module

8

修正

2021/09/24 23:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -78,17 +78,27 @@
78
78
 
79
79
 
80
80
 
81
- ・webpack.config.js
81
+ ・webpack.config.js ※webpack.config.jsを修正
82
82
 
83
83
  ```javascript
84
84
 
85
+ const path = require("path");
86
+
87
+
88
+
85
89
  module.exports = {
86
90
 
91
+ entry: {
92
+
87
- entry: "./wwwroot/js/site.js",
93
+ index: path.join(__dirname, "wwwroot", "js", "site.js")
94
+
95
+ },
88
96
 
89
97
  output: {
90
98
 
99
+ path: path.join(__dirname, "wwwroot", "js"),
100
+
91
- filename: "../wwwroot/js/bundle.js"
101
+ filename: "bundle.js"
92
102
 
93
103
  },
94
104
 
@@ -96,6 +106,40 @@
96
106
 
97
107
  mode: "development",
98
108
 
109
+ resolve: {
110
+
111
+ extensions: [".js", ".vue"],
112
+
113
+ alias: {
114
+
115
+ "vue$": "vue/dist/vue.global.js",
116
+
117
+ "ag-grid-enterprise$": "ag-grid-enterprise/dist/ag-grid-enterprise.min.js",
118
+
119
+ "ag-grid-vue3$": "ag-grid-vue/dist/ag-grid-vue3.umd.min.js",
120
+
121
+ "axios$": "axios/dist/axios.min.js",
122
+
123
+ "bootstrap$": "bootstrap/dist/js/bootstrap.min.js",
124
+
125
+ "chart.js$": "chart.js/dist/chart.min/js",
126
+
127
+ "file-saver$": "file-saver/dist/FileSaver.min.js",
128
+
129
+ "luxon$": "luxon/src/luxon.js",
130
+
131
+
132
+
133
+ "bootstrap-css$": "bootstrap/dist/css/bootstrap.min.css",
134
+
135
+ "ag-grid-enterprise-css$": "ag-grid-enterprise/dist/styles/ag-grid.min.css",
136
+
137
+ "ag-grid-enterprise-ag-theme-balham-css$": "ag-grid-enterprise/dist/styles/ag-theme-balham.min.css",
138
+
139
+ },
140
+
141
+ },
142
+
99
143
  module: {
100
144
 
101
145
  rules: [

7

修正

2021/09/24 23:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- しかし、importをする方法がわからなく。
15
+ しかし、webpackを使用した時、どうやってimportをするのか方法がわからなく。
16
16
 
17
17
 
18
18
 

6

修正

2021/09/24 08:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,10 @@
9
9
  "webpack.config.js"に下記の設定をし、> npx webpackを実行すると、
10
10
 
11
11
  "/wwwroot/js/bundle.js"が作成されました。
12
+
13
+
14
+
15
+ しかし、importをする方法がわからなく。
12
16
 
13
17
 
14
18
 

5

修正

2021/09/24 08:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -74,7 +74,7 @@
74
74
 
75
75
 
76
76
 
77
- ・webpack.config.js
77
+ ・webpack.config.js
78
78
 
79
79
  ```javascript
80
80
 

4

修正

2021/09/24 08:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,10 @@
9
9
  "webpack.config.js"に下記の設定をし、> npx webpackを実行すると、
10
10
 
11
11
  "/wwwroot/js/bundle.js"が作成されました。
12
+
13
+
14
+
15
+ どなたかご教授お願いします。
12
16
 
13
17
 
14
18
 

3

修正

2021/09/24 07:54

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  "version": "1.0.0",
22
22
 
23
- "name": "asp.net",
23
+ "name": "xxx",
24
24
 
25
25
  "dependencies": {
26
26
 

2

修正

2021/09/24 07:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  "dependencies": {
26
26
 
27
- "ag-grid-comminuty": "^26.0.1",
27
+ "ag-grid-community": "^26.0.1",
28
28
 
29
29
  "ag-grid-vue3": "^26.0.1",
30
30
 

1

修正

2021/09/24 07:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  "dependencies": {
26
26
 
27
- "ag-grid-enterprise": "^26.0.1",
27
+ "ag-grid-comminuty": "^26.0.1",
28
28
 
29
29
  "ag-grid-vue3": "^26.0.1",
30
30