質問編集履歴

追記

2020/08/08 07:54

投稿

hasshy

スコア102

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【webpack】Vueコンポーネント内に記載したTypeScriptのデコレータを~~解析でき~~ない
1	+ 【webpack】Vueコンポーネント内に記載したTypeScriptのデコレータを使えない

test CHANGED Viewed

@@ -12,12 +12,26 @@
+## 環境
+モジュール|バージョン
+---|---
+vue|^2.6.11
+ts-loader|^8.0.2
+typescript|^3.9.7
 ## エラー内容
 webpackコマンドでビルドすると次のようなエラーが発生します。
-エラー内容を読む限り、```@```を解析できていないと考えています。
 ご共有までに、vue-property-decoratorのデコレータを使用してコンポーネントを使おうとしました。
@@ -26,8 +40,6 @@
 ```
 ERROR in ./src/ts/components/Hello.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./src/ts/components/Hello.vue?vue&type=script&lang=ts&) 11:0
@@ -50,6 +62,8 @@
 ```
 ## ソース
 ### webpack.config.js
@@ -746,8 +760,12 @@
 ### 実行したコマンド
+node_module内にあるwebpackを起動して、ビルドしています。
 ```bash
 $ npm run dev
+// node_modules/webpack/bin/webpack.js --mode=development
-```
+```

追加

2020/08/08 07:54

投稿

hasshy

スコア102

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -54,7 +54,7 @@
 ### webpack.config.js
-typescriptのローダーは設定しています。
+ts拡張子のローダー設定で、options.appendTsSuffixToにvueファイルを対象にする設定をしています。

webpackのコンフィグ追加

2020/08/06 12:09

投稿

hasshy

スコア102

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -52,6 +52,432 @@
 ## ソース
+### webpack.config.js
+typescriptのローダーは設定しています。
+```
+const path = require('path');
+const webpack = require('webpack');
+const glob = require('glob');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
+const srcDir = './src';
+/**
+ * ファイル名のみ抽出
+ *
+ * @param {string} path
+ * @return {void | BaseNode | string | *}
+ */
+const getFileName = function(path) {
+  return path.replace(/.[^/.]+$/, '');
+}
+const templates = [];
+const srcPugDir = srcDir + '/pug';
+glob.sync('**/*.pug', {
+  ignore: '**/_*.pug',
+  cwd: srcPugDir,
+}).map(function(file) {
+  templates.push(new HtmlWebpackPlugin({
+    template: path.resolve(srcPugDir, file),
+    filename: getFileName(file) + '.html',
+  }));
+});
+const TerserPlugin = require('terser-webpack-plugin');
+const workboxPlugin = require('workbox-webpack-plugin');
+module.exports = {
+  mode: 'development',
+  entry: {
+    'index': './src/ts/index.ts',
+  },
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js',
+  },
+  plugins: [
+    ...templates,
+    new HtmlWebpackPugPlugin(),
+    new VueLoaderPlugin(),
+    new webpack.ProgressPlugin(),
+    new workboxPlugin.GenerateSW({
+      swDest: 'sw.js',
+      clientsClaim: true,
+      skipWaiting: false,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            'scss': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader',
+            ],
+            'sass': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader?indentedSyntax',
+            ],
+          },
+        },
+      },
+      {
+        test: /.(ts|tsx)?$/,
+        loader: 'ts-loader',
+        include: [],
+        exclude: [/node_modules/],
+        options: {
+          appendTsSuffixTo: [/.vue$/],
+        },
+      },
+      {
+        test: /.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+        },
+      },
+      {
+        test: /.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+        ],
+      },
+      {
+        test: /.pug$/,
+        oneOf: [
+          {
+            resourceQuery: /^?vue/,
+            use: ['pug-plain-loader'],
+          },
+          {
+            use: ['raw-loader', 'pug-plain-loader'],
+          },
+        ],
+      },
+      {
+        test: /.scss$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              url: false,
+              sourceMap: true,
+              importLoaders: 2,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+              plugins: [
+                require('autoprefixer')({
+                  grid: true,
+                }),
+              ],
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          'import-glob-loader',
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.json', '.vue'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+    },
+  },
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    openPage: 'index.html',
+    watchContentBase: true,
+    inline: true,
+    port: 8080,
+    historyApiFallback: true,
+    noInfo: true,
+  },
+  performance: {
+    hints: false,
+  },
+  devtool: '#eval-source-map',
+  optimization: {
+    minimizer: [new TerserPlugin()],
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          priority: -10,
+          test: /[\/]node_modules[\/]/,
+        },
+      },
+      chunks: 'async',
+      minChunks: 1,
+      minSize: 30000,
+      name: true,
+    },
+  },
+};
+// product設定
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map';
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
+  ]);
+  module.exports.optimization.minimizer =
+    (module.exports.optimization.minimizer || []).concat([
+      new UglifyJsPlugin({
+        sourceMap: true,
+      }),
+    ]);
+}
+```
 ### tsconfig.json
 デコレータを有効にするために、```experimentalDecorators```は有効にしています。