実現したいこと
VueのSFCをバンドルしたいです
発生している問題
関係ないファイルが読み込まれる
関連するソースコード・エラー
webpack.config.js
JavaScript
1const VueLoaderPlugin = require('vue-loader/lib/plugin'); 2 3module.exports = { 4 target: 'web', 5 node: { fs: "empty", net: "empty" }, 6 mode: "development", 7 entry: "./src/account/main.ts", 8 module: { 9 rules: [ 10 { 11 test: /.js$/, 12 exclude: /node_modules/, 13 use: { 14 loader:'babel-loader', 15 options:{presets: ['@babel/preset-env']} 16 } 17 }, 18 { 19 test: /.ts$/, 20 use: 'ts-loader' 21 }, 22 { 23 test: /.vue$/, 24 use: 'vue-loader', 25 exclude: /node_modules/ 26 }, 27 { 28 test: /.(scss|css)$/, 29 exclude: /node_modules/, 30 use: [ 31 'style-loader', 32 { 33 loader:'css-loader', 34 options:{ 35 url:false, 36 sourceMap:false, 37 importLoaders:2 38 } 39 }, {loader:'sass-loader'} 40 ] 41 } 42 ] 43 }, 44 output: { 45 path: `${__dirname}/dist`, 46 filename: "account.bundle.js" 47 }, 48 plugins: [ 49 new VueLoaderPlugin() 50 ], 51 resolve: { 52 alias: { 53 'vue$': 'vue/dist/vue.esm.js' 54 }, 55 extensions: ['.vue', '.ts', '.js'] 56 } 57};
.babelrc
{ "presets":[["@babel/preset-env",{"useBuiltIns":"usage"}]] }
package.json
JSON
1{ 2 "name": "project", 3 "version": "1.0.0", 4 "description": "My App", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "dependencies": { 13 "vue": "^2.6.9", 14 "vue-property-decorator": "^8.0.0", 15 "vue-router": "^3.0.2", 16 "vuex": "^3.1.0", 17 "vuex-router-sync": "^5.0.0" 18 }, 19 "devDependencies": { 20 "@babel/core": "^7.3.4", 21 "@babel/preset-env": "^7.3.4", 22 "babel-loader": "^8.0.5", 23 "css-loader": "^2.1.1", 24 "node-sass": "^4.11.0", 25 "sass-loader": "^7.1.0", 26 "style-loader": "^0.23.1", 27 "ts-loader": "^5.3.3", 28 "typescript": "^3.3.3333", 29 "vue-loader": "^15.7.0", 30 "vue-style-loader": "^4.1.2", 31 "vue-template-compiler": "^2.6.9", 32 "webpack": "^4.29.6", 33 "webpack-cli": "^3.3.0" 34 } 35}
tsconfig.json
JSON
1{ 2 "compilerOptions": { 3 "target": "es5", 4 "module": "es2015", 5 "strict": true, 6 "moduleResolution": "node", 7 "experimentalDecorators":true, 8 "allowJs": true, 9 "rootDir": ".", 10 "outDir": "./dist/" 11 } 12}
出ているエラー
ERROR in ./src/account/App.vue?vue&type=script&lang=ts& (./node_modules/ts-loade r!./node_modules/vue-loader/lib??vue-loader-options!./src/account/App.vue?vue&ty pe=script&lang=ts&) Module not found: Error: Can't resolve 'express' in 'C:\Users\xxx\project \src\account' @ ./src/account/App.vue?vue&type=script&lang=ts& (./node_modules/ts-loader!./no de_modules/vue-loader/lib??vue-loader-options!./src/account/App.vue?vue&type=scr ipt&lang=ts&) 2:14-32 @ ./src/account/App.vue?vue&type=script&lang=ts& @ ./src/account/App.vue @ ./src/account/main.ts
App.vue
Vue
1<template> 2 <div id="app"> 3 <h2>test</h2> 4 </div> 5</template> 6<script lang="ts"> 7import {Vue,Component} from 'vue-property-decorator'; 8@Component 9export default class App extends Vue{ 10} 11</script> 12 13<style lang="scss"> 14h2{ 15 color:red 16} 17</style>
main.ts
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app')
グローバルにもwebpackとwebpack-cliがありますがpackage.jsonに書かれているバージョンと同じです
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。