一文带你搞懂Vue Loader是如何工作的

<!-- 示例 .vue 文件 -->
<template>
  <div>Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello World"
    };
  }
};
</script>

<style scoped>
div {
  color: red;
}
</style>

// 伪代码，示意分离过程
const template = extractTemplate(content);
const script = extractScript(content);
const style = extractStyle(content);

// 编译模板
const renderFn = vueTemplateCompiler.compile(template);

// 编译脚本
const compiledScript = babelLoader(script);

// 编译样式
const compiledStyle = cssLoader(style);

// 组合生成模块
module.exports = {
  render: renderFn,
  script: compiledScript,
  style: compiledStyle
};

// 一个简单的 Vue Loader 插件示例
function MyVueLoaderPlugin() {}

MyVueLoaderPlugin.prototype.apply = function (compiler) {
  compiler.hooks.emit.tapAsync('MyVueLoaderPlugin', (compilation, callback) => {
    console.log('这是一个 Vue Loader 插件');
    callback();
  });
};

module.exports = MyVueLoaderPlugin;

// 在 webpack 配置中启用缓存
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          cacheDirectory: './.cache/vue-loader',
          cacheIdentifier: 'v1', // 用于控制缓存更新
        },
      },
    ],
  },
};

// 使用 webpack-dev-server 实现热更新
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config.js');

config.entry.app.unshift('webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server');

config.plugins.push(new webpack.HotModuleReplacementPlugin());

const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
  hot: true,
  historyApiFallback: true,
});

server.listen(8080, 'localhost', () => {
  console.log('dev server listening on port 8080');
});