Vue & Webpack

先安装对应插件vue-loader、vue-template-compiler。

npm i -D vue-loader vue-template-compiler

• vue-template-compiler 将vue模板预编译成render函数。
• vue-loader 结合vue-template-compiler将vue文件转换为js文本。

接着配置Webpack文件:

// webpack.base.js
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          configFile: path.resolve(process.cwd(), 'tsconfig.json'),
          appendTsSuffixTo: [/\.vue$/]  // vue内部使用ts
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      }
    ],
  },
};

由于我们使用了Sass，这里还得安装针对Sass的Webpack插件：

npm i -D vue-style-loader css-loader
npm i -D sass-loader node-sass 

// webpack.base.js
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ],
  },
};

执行npm run dev看看效果

这个报错的原因是由于vue-loader未提供具体类型给TypeScript导致的，vue-loader版本为v17.0.0。目前Issues还未有官方答复，我们暂时通过ignoreDiagnostics来解决：

// webpack.base.js
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          configFile: path.resolve(process.cwd(), 'tsconfig.json'),
          appendTsSuffixTo: [/\.vue$/],  // vue内部使用ts
          ignoreDiagnostics: [7006]  // 针对vue-loader的bug
        },
      },
      ...
    ],
  },
};

这时再执行构建就会看到预期的效果：

npm run dev
# or
npm run build
http-server dist