質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

630閲覧

vuejsでブレークポイントで止まってくれない(GoogleChrome)

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2018/01/30 02:38

編集2022/01/12 10:55

js

1//webpack.config.js 2 3const path = require('path'); 4const ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 6module.exports = [{ 7 // メインとなるJavaScriptファイル(エントリーポイント) 8 entry: { 9 home: './ts/home.ts', 10 main: './ts/main.ts', 11 practice: "./ts/practice.ts", 12 hoge: "./ts/hoge.ts" 13 }, 14 // ファイルの出力設定 15 output: { 16 // 出力ファイルのディレクトリ名 17 path: `${__dirname}/build/js`, 18 // 出力ファイル名 19 filename: '[name].js' 20 }, 21 module: { 22 rules: [{ 23 // 拡張子 .ts の場合 24 test: /.ts$/, 25 // TypeScript をコンパイルする 26 use: 'awesome-typescript-loader' 27 }, 28 // ソースマップファイルの処理 29 { 30 enforce: 'pre', 31 test: /.js$/, 32 loader: 'source-map-loader' 33 }, 34 { 35 test: /.vue$/, 36 exclude: /node_modules/, 37 loader: 'vue-loader' 38 } 39 ] 40 }, 41 // import 文で .ts ファイルを解決するため 42 resolve: { 43 extensions: ['.ts', '.js'], 44 // Webpackで利用するときの設定 45 alias: { 46 vue: 'vue/dist/vue.js', 47 axios: 'axios/lib/axios.js' 48 } 49 }, 50 // ソースマップを有効に 51 devtool: '#cheap-module-inline-source-map' 52}, { 53 entry: { 54 common: './sass/common.scss', 55 font: './sass/font.scss', 56 home: './sass/home.scss', 57 }, 58 output: { 59 // 出力ファイルのディレクトリ名 60 path: `${__dirname}/build/css`, 61 // 出力ファイル名 62 filename: '[name].css' 63 }, 64 module: { 65 rules: [{ 66 test: /.scss$/, 67 use: ExtractTextPlugin.extract({ 68 fallback: 'style-loader', 69 use: [{ 70 loader: 'css-loader', 71 options: { minimize: true } 72 }, 73 { 74 loader: 'sass-loader', 75 options: { minimize: true } 76 } 77 ] 78 }) 79 }] 80 }, 81 plugins: [ 82 new ExtractTextPlugin('[name].css') 83 ], 84 externals: [{ 85 jquery: 'jQuery' 86 }] 87}];

json

1//tsconfig.json 2 3{ 4 "compilerOptions": { 5 "sourceMap": true, 6 // TSはECMAScript 5に変換 7 "target": "es5", 8 // TSのモジュールはES Modulesとして出力 9 "module": "es2015", 10 // import Vue from 'vue' の書き方を許容する 11 "allowSyntheticDefaultImports": true, 12 "lib": [ 13 "dom", 14 "es2017" 15 ], 16 "moduleResolution": "node", 17 // デコレーターを有効に設定 18 "experimentalDecorators": true 19 } 20}

クロムのブレークポイントで止まってくれません(T___T)
もともと

devtool: 'source-map'

となっていたのですが、https://qiita.com/nak1114/items/c57c52e87fcbc494263e
この記事を読んで

devtool: '#cheap-module-inline-source-map'

に変えました。
typescriptにvueを書いてwebpackでコンパイルしています。
typescriptファイルにブレークをはりたいのですが、止まってくれません

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問