teratail
回答率
85.48%
質問するログイン新規登録
トップVue.jsに関する質問webpackを利用した時にnode_moduleのvue.jsをrequireで読み込めなくて困っています。→ 訂正　importで読み込めなくて困っています。

編集履歴

質問編集履歴

20

修正

2022/03/18 07:03

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -113,8 +113,8 @@
113
113
  resolve: {
114
114
  // Webpackで利用するときの設定
115
115
  alias: {
116
- "bootstrap$": "./node_modules/bootstrap/dist/js/bootstrap.js",
116
+ "bootstrap$": "./bootstrap/dist/js/bootstrap.js",
117
- "vue$": "./node_modules/vue/dist/vue.esm-bundler.js"
117
+ "vue$": "./vue/dist/vue.esm-bundler.js"
118
118
  },
119
119
  extensions: ["*", ".js", ".vue"],
120
120
  },
@@ -154,7 +154,8 @@
154
154
  </div>
155
155
 
156
156
  <!-- 画面ごとのjavascript -->
157
+ <!-- webpackから実行できるようになった -->
157
- <script type="module" src="./js/Test1/index.js" defer></script>
158
+ <!-- <script type="module" src="./js/Test1/index.js" defer></script> -->
158
159
  ```
159
160
 
160
161
  ```javascript
Vue.jsJavaScriptwebpack

19

修正

2022/03/18 06:02

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -113,8 +113,8 @@
113
113
  resolve: {
114
114
  // Webpackで利用するときの設定
115
115
  alias: {
116
- "bootstrap$": "../node_modules/bootstrap/dist/js/bootstrap.js",
116
+ "bootstrap$": "./node_modules/bootstrap/dist/js/bootstrap.js",
117
- "vue$": "../node_modules/vue/dist/vue.esm-bundler.js"
117
+ "vue$": "./node_modules/vue/dist/vue.esm-bundler.js"
118
118
  },
119
119
  extensions: ["*", ".js", ".vue"],
120
120
  },
Vue.jsJavaScriptwebpack

18

修正

2022/03/18 06:01

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -113,8 +113,8 @@
113
113
  resolve: {
114
114
  // Webpackで利用するときの設定
115
115
  alias: {
116
- "bootstrap$": "bootstrap/dist/js/bootstrap.js",
116
+ "bootstrap$": "../node_modules/bootstrap/dist/js/bootstrap.js",
117
- "vue$": "vue/dist/vue.esm-bundler.js"
117
+ "vue$": "../node_modules/vue/dist/vue.esm-bundler.js"
118
118
  },
119
119
  extensions: ["*", ".js", ".vue"],
120
120
  },
Vue.jsJavaScriptwebpack

17

修正

2022/03/18 05:50

投稿

mee12
mee12

スコア101

test CHANGED
@@ -1 +1 @@
1
- webpackを利用した時にnode_moduleのvue.jsをrequireで読み込めなくて困っています。
1
+ webpackを利用した時にnode_moduleのvue.jsをrequireで読み込めなくて困っています。→ 訂正　importで読み込めなくて困っています。
test CHANGED
@@ -1,12 +1,16 @@
1
- webpackを利用した時にnode_moduleをrequireで読み込めなくて困っています。
1
+ ~~webpackを利用した時にnode_moduleをrequireで読み込めなくて困っています。~~
2
+ → 訂正　webpackを利用した時にnode_moduleをimportで読み込めなくて困っています。
2
3
 
3
4
  まずnpmでパッケージをインストールし、　(npm install)
4
5
  webpackでビルド (npm run build)
5
6
 
6
- までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、
7
- Uncaught ReferenceError: require is not defined　が発生してしまいました。
7
+ ~~までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、Uncaught ReferenceError: require is not defined　が発生してしまいました。
8
+ コンソールでwindowにvueが含まれていなかったので読み込めないのかもしれませんが。~~
8
9
 
10
+ ↓　変更
11
+
12
+ webpack-config.js、そのほかの設定を見直しし、
9
- コンソールでwindowにvueが含まれていなかったので読み込めないのかもしれませんが。
13
+ importで読み込めるように調整をしていますがうまくいきませんでした。
10
14
 
11
15
  どなたかわかる方いらっしゃいましたらお願いします。
12
16
 
Vue.jsJavaScriptwebpack

16

修正

2022/03/18 05:45

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -119,11 +119,11 @@
119
119
  new HtmlWebpackPlugin({
120
120
  template: "./src/index.html",
121
121
  }),
122
- new VueLoaderPlugin(),
123
122
  new MiniCssExtractPlugin({
124
123
  filename: "./css/site.css",
125
124
  chunkFilename: "[name].css"
126
125
  }),
126
+ new VueLoaderPlugin(),
127
127
  new webpack.DefinePlugin({
128
128
  __VUE_OPTIONS_API__: false,
129
129
  __VUE_PROD_DEVTOOLS__: false,
Vue.jsJavaScriptwebpack

15

修正

2022/03/18 05:44

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  どなたかわかる方いらっしゃいましたらお願いします。
12
12
 
13
- 本文の追記は長くなってしまうため、ソースコードを変更しました。
13
+ 本文のソースコードの追記は長くなってしまうため、ソースコードをそのまま変更しました。
14
14
 
15
15
  ```txt
16
16
  // フォルダ構成を修正　
Vue.jsJavaScriptwebpack

14

修正

2022/03/18 05:42

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -155,7 +155,7 @@
155
155
 
156
156
  ```javascript
157
157
  // javascriptを修正
158
- import { createApp} from "vue"; // 入らない
158
+ import { createApp } from "vue"; // 入らない
159
159
 
160
160
  const app = createApp({
161
161
 
Vue.jsJavaScriptwebpack

13

修正

2022/03/18 05:41

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,6 @@
110
110
  // Webpackで利用するときの設定
111
111
  alias: {
112
112
  "bootstrap$": "bootstrap/dist/js/bootstrap.js",
113
- "popperjs$": "@popperjs/core",
114
113
  "vue$": "vue/dist/vue.esm-bundler.js"
115
114
  },
116
115
  extensions: ["*", ".js", ".vue"],
Vue.jsJavaScriptwebpack

12

修正

2022/03/18 05:40

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -91,10 +91,8 @@
91
91
  rules: [
92
92
  {
93
93
  test: /\.js$/,
94
- // ローダーの処理対象となるディレクトリ
95
94
  include: path.resolve(__dirname, "/src"),
96
95
  loader: "babel-loader",
97
- // Babelオプション(プリセットを指定することで、ES6をES5に変換)
98
96
  options: { presets: ["@babel/preset-env"] }
99
97
  },
100
98
  {
Vue.jsJavaScriptwebpack

11

修正

2022/03/18 05:39

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -23,10 +23,10 @@
23
23
  - index.js
24
24
  - src
25
25
  - index.js
26
- - index.html
26
+ - index.html (エントリポイント用のhtml)
27
27
  - node_modules
28
28
 
29
- - View
29
+ - Views
30
30
  - Test1
31
31
  - Index.html
32
32
  ```
Vue.jsJavaScriptwebpack

10

修正

2022/03/18 05:39

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -13,7 +13,7 @@
13
13
  本文の追記は長くなってしまうため、ソースコードを変更しました。
14
14
 
15
15
  ```txt
16
- // フォルダ構成を修正
16
+ // フォルダ構成を修正　
17
17
  - Project
18
18
  - wwwroot
19
19
  - dist
Vue.jsJavaScriptwebpack

9

修正

2022/03/18 05:38

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -14,17 +14,21 @@
14
14
 
15
15
  ```txt
16
16
  // フォルダ構成を修正
17
+ - Project
17
- root
18
+ - wwwroot
18
- - dist
19
+ - dist
19
- - main.js
20
+ - main.js
20
- - js
21
+ - js
22
+ - Test1
23
+ - index.js
24
+ - src
25
+ - index.js
26
+ - index.html
27
+ - node_modules
28
+
29
+ - View
21
30
  - Test1
22
- - index.js
23
- - src
24
- - index.js
25
- - index.html
31
+ - Index.html
26
- - node_modules
27
-
28
32
  ```
29
33
 
30
34
  ```package.json
Vue.jsJavaScriptwebpack

8

修正

2022/03/18 05:36

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -136,6 +136,8 @@
136
136
  import "@popperjs/core";
137
137
  import "bootstrap";
138
138
  import "vue";
139
+
140
+ import "../js/Test1/index.js
139
141
  ```
140
142
 
141
143
  ```html
Vue.jsJavaScriptwebpack

7

修正

2022/03/18 05:33

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -140,7 +140,7 @@
140
140
 
141
141
  ```html
142
142
  // htmlを修正
143
- <script type="module" src="./dist/main.js"></script>
143
+ <script src="./dist/main.js"></script>
144
144
 
145
145
  <div id="app">
146
146
 
Vue.jsJavaScriptwebpack

6

修正

2022/03/18 05:33

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -161,3 +161,7 @@
161
161
  app.mount("#app");
162
162
  ```
163
163
 
164
+ 現在の画面のコンソール
165
+ webpack-dev-serverを起動し、javascriptでブレークをすることはできたが、createAppが空だった。
166
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-18/cd0c9f75-0e22-46a2-a03d-375a1852f2f2.png)
167
+
Vue.jsJavaScriptwebpack

5

修正

2022/03/18 05:23

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -10,22 +10,25 @@
10
10
 
11
11
  どなたかわかる方いらっしゃいましたらお願いします。
12
12
 
13
+ 本文の追記は長くなってしまうため、ソースコードを変更しました。
14
+
13
15
  ```txt
14
- // フォルダ構成
16
+ // フォルダ構成を修正
15
17
  root
16
18
  - dist
17
- - app.bundle.js
19
+ - main.js
20
+ - js
21
+ - Test1
18
- - index.js
22
+ - index.js
19
23
  - src
20
- - css
21
- - js
22
- - index.js
24
+ - index.js
23
25
  - index.html
24
26
  - node_modules
25
27
 
26
28
  ```
27
29
 
28
30
  ```package.json
31
+ // package.jsonを修正
29
32
  {
30
33
  "name": "webapp",
31
34
  "version": "1.0.0",
@@ -43,8 +46,7 @@
43
46
  "babel-loader": "^8.2.3",
44
47
  "css-loader": "^6.7.1",
45
48
  "html-webpack-plugin": "^5.5.0",
46
- "sass-loader": "12.6.0",
49
+ "mini-css-extract-plugin": "^2.5.3",
47
- "style-loader": "^3.3.1",
48
50
  "vue-loader": "^17.0.0",
49
51
  "vue-style-loader": "^4.1.3",
50
52
  "webpack": "^5.70.0",
@@ -62,65 +64,95 @@
62
64
  ```
63
65
 
64
66
  ```webpack-config.js
67
+ // webpack-config.jsを修正
65
68
  const path = require("path");
66
69
 
70
+ const webpack = require("webpack");
67
71
  const HtmlWebpackPlugin = require("html-webpack-plugin");
68
72
  const { VueLoaderPlugin } = require("vue-loader");
73
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
69
74
 
70
75
  module.exports = {
71
76
  entry: {
72
- main: "./js/app.js"
77
+ main: "./src/index.js",
78
+ TestManagement_SampleLists: "./js/views/transaction.testmanagement/TestManagement_SampleLists/index.js"
73
79
  },
74
80
  output: {
75
- filename: "app.bundle.js",
81
+ filename: "[name].js",
76
- path: path.resolve(__dirname, "..", "wwwroot", "dist")
82
+ path: __dirname + "/dist"
77
83
  },
78
84
  devtool: "source-map",
79
85
  mode: "development",
80
86
  module: {
81
87
  rules: [
82
88
  {
89
+ test: /\.js$/,
90
+ // ローダーの処理対象となるディレクトリ
91
+ include: path.resolve(__dirname, "/src"),
83
- test: /\.js$/, use: "babel-loader"
92
+ loader: "babel-loader",
93
+ // Babelオプション(プリセットを指定することで、ES6をES5に変換)
94
+ options: { presets: ["@babel/preset-env"] }
84
95
  },
85
96
  {
97
+ test: /\.vue$/,
86
- test: /\.vue$/, use: "vue-loader"
98
+ loader: "vue-loader"
87
99
  },
88
100
  {
101
+ test: /\.css$/,
89
- test: /\.css$/, use: ["vue-style-loader", "css-loader"]
102
+ use: [MiniCssExtractPlugin.loader, "css-loader"],
90
103
  }
91
104
  ],
105
+ },
106
+
107
+ resolve: {
108
+ // Webpackで利用するときの設定
109
+ alias: {
110
+ "bootstrap$": "bootstrap/dist/js/bootstrap.js",
111
+ "popperjs$": "@popperjs/core",
112
+ "vue$": "vue/dist/vue.esm-bundler.js"
113
+ },
114
+ extensions: ["*", ".js", ".vue"],
92
115
  },
93
116
 
94
117
  plugins: [
95
118
  new HtmlWebpackPlugin({
96
119
  template: "./src/index.html",
97
120
  }),
98
- new VueLoaderPlugin()
121
+ new VueLoaderPlugin(),
122
+ new MiniCssExtractPlugin({
123
+ filename: "./css/site.css",
124
+ chunkFilename: "[name].css"
125
+ }),
126
+ new webpack.DefinePlugin({
127
+ __VUE_OPTIONS_API__: false,
128
+ __VUE_PROD_DEVTOOLS__: false,
129
+ })
99
130
  ]
100
131
  };
101
132
  ```
102
133
 
103
- ```app.js
134
+ ```index.js
135
+ // app.js -> index.jsに変更、修正
104
136
  import "@popperjs/core";
105
137
  import "bootstrap";
106
- import "bootstrap/dist/css/bootstrap.css";
107
-
108
138
  import "vue";
109
139
  ```
110
140
 
111
141
  ```html
142
+ // htmlを修正
112
- <script type="module" src="./dist/app.bundle.js"></script>
143
+ <script type="module" src="./dist/main.js"></script>
113
144
 
114
145
  <div id="app">
115
146
 
116
147
  </div>
117
148
 
118
149
  <!-- 画面ごとのjavascript -->
119
- <script src="./index.js></script>
150
+ <script type="module" src="./js/Test1/index.js" defer></script>
120
151
  ```
121
152
 
122
153
  ```javascript
154
+ // javascriptを修正
123
- const createApp = require("vue"); // Uncaught ReferenceError: require is not defined
155
+ import { createApp} from "vue"; // 入らない
124
156
 
125
157
  const app = createApp({
126
158
 
Vue.jsJavaScriptwebpack

4

修正

2022/03/17 04:20

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
  までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、
7
7
  Uncaught ReferenceError: require is not defined　が発生してしまいました。
8
8
 
9
+ コンソールでwindowにvueが含まれていなかったので読み込めないのかもしれませんが。
10
+
9
- どなたかわかるかたいらっしゃいましたらお願いします。
11
+ どなたかわかる方いらっしゃいましたらお願いします。
10
12
 
11
13
  ```txt
12
14
  // フォルダ構成
Vue.jsJavaScriptwebpack

3

修正

2022/03/17 04:17

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -99,11 +99,11 @@
99
99
  ```
100
100
 
101
101
  ```app.js
102
- import "../node_modules/@popperjs/core";
102
+ import "@popperjs/core";
103
- import "../node_modules/bootstrap";
103
+ import "bootstrap";
104
- import "../node_modules/bootstrap/dist/css/bootstrap.css";
104
+ import "bootstrap/dist/css/bootstrap.css";
105
105
 
106
- import "../node_modules/vue";
106
+ import "vue";
107
107
  ```
108
108
 
109
109
  ```html
Vue.jsJavaScriptwebpack

2

修正

2022/03/17 04:13

投稿

mee12
mee12

スコア101

test CHANGED
@@ -1 +1 @@
1
- webpackを利用した時にnode_moduleをrequireで読み込めなくて困っています。
1
+ webpackを利用した時にnode_moduleのvue.jsをrequireで読み込めなくて困っています。
test CHANGED
@@ -3,7 +3,7 @@
3
3
  まずnpmでパッケージをインストールし、　(npm install)
4
4
  webpackでビルド (npm run build)
5
5
 
6
- までは成功したのですが、その後実際に使用するためにrequireで読み込もうとしたのですが、
6
+ までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、
7
7
  Uncaught ReferenceError: require is not defined　が発生してしまいました。
8
8
 
9
9
  どなたかわかるかたいらっしゃいましたらお願いします。
Vue.jsJavaScriptwebpack
Vue.js

1

修正

2022/03/17 04:12

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,14 @@
98
98
  };
99
99
  ```
100
100
 
101
+ ```app.js
102
+ import "../node_modules/@popperjs/core";
103
+ import "../node_modules/bootstrap";
104
+ import "../node_modules/bootstrap/dist/css/bootstrap.css";
105
+
106
+ import "../node_modules/vue";
107
+ ```
108
+
101
109
  ```html
102
110
  <script type="module" src="./dist/app.bundle.js"></script>
103
111
 
JavaScriptwebpack