vue-loader@next not working

BlackCubeNo99 commented 2 years ago

Causes the condition compilation of html to fail

demo.vue：

<!-- #!if IS_PC -->
  <p>PC</p>
<!-- #!elseif IS_M -->
  <p>M</p>
<!-- #!endif -->

result：

<p>PC</p>
<p>M</p>

My npm config：

"webpack-preprocessor-loader": "^1.1.4",
"vue-loader": "^16.8.1",

afterwind-io commented 2 years ago

Please provide a working demo or config file that can reproduce the issue.

BlackCubeNo99 commented 2 years ago

Please provide a working demo or config file that can reproduce the issue.

@afterwind-io

webpack.js

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
        ],
      },
      {
        test: /\.(vue|js)$/,
        use: [
          {
            loader: 'webpack-preprocessor-loader',
            options: {
              debug: true,
              directives: {
                secret: false,
              },
              params: {
                IS_PC: true,
                IS_M: false,
              },
              verbose: false,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    }),
    new VueLoaderPlugin(),
  ],
}

src/App.vue

<template>
  <div>
    <!-- #!if IS_M -->
    <p>IS M</p>
    <!-- #!endif -->
  </div>
</template>

<script>
export default {
  setup() {
    // #!if IS_PC
    console.log('pc')
    // #!elseif IS_M
    console.log('m')
    // #!endif
  }
}
</script>

src/index.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

package.json

{
  "name": "webpack-preprocessor-loader-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development --config ./webpack.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.20",
    "html-webpack-plugin": "^5.4.0",
    "vue-loader": "^16.8.1",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1",
    "webpack-preprocessor-loader": "^1.1.4"
  },
  "dependencies": {
    "vue": "^3.2.20"
  }
}

afterwind-io / preprocessor-loader

vue-loader@next not working #23