webpack打包SFC文件(5)

 Vue打包后不同版本文件的解析

总的来说就是：vue再不通过情况下可以使用不同的vue文件，如果你使用运行时+编译器的vue文件，就可以对template中的模板进行解析。但是使用仅运行时的文件无法对template进行解析。

1，webpack打包vueSFC文件  

npm install  vue-loader  @vue/compiler-sfc  

导入vue中处理打包vue的插件并使用 const { VueLoaderPlugin } = require("vue-loader/dist/index");

webpack配置：

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const { VueLoaderPlugin } = require("vue-loader/dist/index");

const path = require("path");
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(less||css)$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
      },
      {
        test: /\.(jpg|svg|png)$/i,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      },
      {
        test: /\.js$/,
        use: ["babel-loader"]
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      title: "模板"
    }),
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "./",
          globOptions: {
            ignore: ["**/index.html"]
          }
        }
      ]
    }),
    new VueLoaderPlugin()
  ]
};

页面警告处理方法

 

1，_VUE_OPTIONS_API: 是要不要支持vue2的optionsAPI

2，_VUE-PROD_DEVTOOLS:要不要再生产模式下支持vue插件

可以在webpack的DefinPlugin插件中配置：