编程逻辑&工程化

webpack&vue编程逻辑，工程化相关扩展

问题：浏览器如何解析vue文件？

原生JavaScript实现基于vue 2.x的v-if和v-show：

单文件组件转为符合浏览器解析规则的JS文件：

1. 创建服务应用，即node

2. 在node应用上通过一个程序将.vue转为.js

3. es6语法转为es5，正常跑node程序

4. less，sass语法需要通过node程序转为css

5. node里有fs里有许多方法可以改变

6. 最终形成完整的html，包括css的引入

问题：如何完成？

可以利用webpack

安装依赖：

npm i -D 
webpack@4
webpack-cli@3 
webpack-dev-server@3
style-loader@2 
css-loader@5
//处理css和js文件引用html
html-webpack-plugin@4.5.0

配置webpack.config.js：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: resolve(__dirname, 'src/main.js'),
  output: {
    filename: 'main.js',
    path: resolve(__dirname, 'dist')
  },
  resolve: {
    //节省后缀
    extensions: ['.js', '.vue']
  },
  //依赖查找顺序规则
  resolveLoader: {
    modules: [
      'node_modules',
      [...]
    ]
  },
  module: {
    rules: [
      {
        test: /.vue$/i,
        loader: 'vue-loader'
      },
      {
        test: /.css$/i,
        loader: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      //处理模板
      template: resolve(__dirname, 'public/index.html')
    })
  ]
}

问题：如何处理vue文件?

问题：如何将template里的字符串

源码地址： https://gitee.com/kevinleeeee/vue-loader-webpack-vshow-vif-demo