webpackを利用した時にnode_moduleをrequireで読み込めなくて困っています。
→ 訂正 webpackを利用した時にnode_moduleをimportで読み込めなくて困っています。
まずnpmでパッケージをインストールし、 (npm install)
webpackでビルド (npm run build)
までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、Uncaught ReferenceError: require is not defined が発生してしまいました。
コンソールでwindowにvueが含まれていなかったので読み込めないのかもしれませんが。
↓ 変更
webpack-config.js、そのほかの設定を見直しし、
importで読み込めるように調整をしていますがうまくいきませんでした。
どなたかわかる方いらっしゃいましたらお願いします。
本文のソースコードの追記は長くなってしまうため、ソースコードをそのまま変更しました。
txt
1// フォルダ構成を修正 2- Project 3 - wwwroot 4 - dist 5 - main.js 6 - js 7 - Test1 8 - index.js 9 - src 10 - index.js 11 - index.html (エントリポイント用のhtml) 12 - node_modules 13 14 - Views 15 - Test1 16 - Index.html
package.json
1// package.jsonを修正 2{ 3 "name": "webapp", 4 "version": "1.0.0", 5 "description": "webapp use webpack", 6 "repository": "webapp", 7 "main": "index.js", 8 "scripts": { 9 "build": "webpack", 10 }, 11 "author": "", 12 "license": "ISC", 13 "devDependencies": { 14 "@babel/core": "^7.17.7", 15 "@babel/preset-env": "^7.16.11", 16 "babel-loader": "^8.2.3", 17 "css-loader": "^6.7.1", 18 "html-webpack-plugin": "^5.5.0", 19 "mini-css-extract-plugin": "^2.5.3", 20 "vue-loader": "^17.0.0", 21 "vue-style-loader": "^4.1.3", 22 "webpack": "^5.70.0", 23 "webpack-cli": "^4.9.2", 24 "webpack-dev-server": "^4.7.4" 25 }, 26 "dependencies": { 27 "@popperjs/core": "^2.11.4", 28 "bootstrap": "^5.1.3", 29 "core-js": "^3.21.1", 30 "vue": "^3.2.31" 31 } 32} 33
webpack
1// webpack-config.jsを修正 2const path = require("path"); 3 4const webpack = require("webpack"); 5const HtmlWebpackPlugin = require("html-webpack-plugin"); 6const { VueLoaderPlugin } = require("vue-loader"); 7const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 8 9module.exports = { 10 entry: { 11 main: "./src/index.js", 12 TestManagement_SampleLists: "./js/views/transaction.testmanagement/TestManagement_SampleLists/index.js" 13 }, 14 output: { 15 filename: "[name].js", 16 path: __dirname + "/dist" 17 }, 18 devtool: "source-map", 19 mode: "development", 20 module: { 21 rules: [ 22 { 23 test: /\.js$/, 24 include: path.resolve(__dirname, "/src"), 25 loader: "babel-loader", 26 options: { presets: ["@babel/preset-env"] } 27 }, 28 { 29 test: /\.vue$/, 30 loader: "vue-loader" 31 }, 32 { 33 test: /\.css$/, 34 use: [MiniCssExtractPlugin.loader, "css-loader"], 35 } 36 ], 37 }, 38 39 resolve: { 40 // Webpackで利用するときの設定 41 alias: { 42 "bootstrap$": "./bootstrap/dist/js/bootstrap.js", 43 "vue$": "./vue/dist/vue.esm-bundler.js" 44 }, 45 extensions: ["*", ".js", ".vue"], 46 }, 47 48 plugins: [ 49 new HtmlWebpackPlugin({ 50 template: "./src/index.html", 51 }), 52 new MiniCssExtractPlugin({ 53 filename: "./css/site.css", 54 chunkFilename: "[name].css" 55 }), 56 new VueLoaderPlugin(), 57 new webpack.DefinePlugin({ 58 __VUE_OPTIONS_API__: false, 59 __VUE_PROD_DEVTOOLS__: false, 60 }) 61 ] 62};
index.js
1// app.js -> index.jsに変更、修正 2import "@popperjs/core"; 3import "bootstrap"; 4import "vue"; 5 6import "../js/Test1/index.js
html
1// htmlを修正 2<script src="./dist/main.js"></script> 3 4<div id="app"> 5 6</div> 7 8<!-- 画面ごとのjavascript --> 9<!-- webpackから実行できるようになった --> 10<!-- <script type="module" src="./js/Test1/index.js" defer></script> -->
javascript
1// javascriptを修正 2import { createApp } from "vue"; // 入らない 3 4const app = createApp({ 5 6}); 7 8app.mount("#app");
現在の画面のコンソール
webpack-dev-serverを起動し、javascriptでブレークをすることはできたが、createAppが空だった。
回答3件