webpack 实践(1): 使用 loader

在日常开发中,我们更多的是使用 vue 模版文件来进行开发,所以新建 App.vue

当然如果要开发其它应用,比如 react,整体套路也是差不多的,就是要换成对应的 loader 或添加 plugins 让 webpack 能够识别不同技术栈的语法、文件。

下方实践代码可从https://github.com/xuwenchao66/webpack-practice中查阅。

创建、引入模版文件

<template>
  <h1>{{ content }}</h1>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      content: 'Hello webpack & vue.'
    }
  }
}
</script>

修改 index.js

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

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

添加 loader & compiler

为了能让 webpack 识别出 .vue 文件,需要添加对应的 loader

vue2.x 中使用的是 vue-loadervue-template-compiler,而在 vue3 中要分别改用 vue-loader@next@vue/compiler-sfc

  • 安装依赖
npm install -D vue-loader@next @vue/compiler-sfc
  • 修改 webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const resolvePath = (...args) => path.resolve(process.cwd(), ...args)

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'main.js',
    path: resolvePath('app', 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolvePath('app', 'index.html')
    }),
    new VueLoaderPlugin()
  ]
}

再次执行构建,webpack 成功读取、编译 .vue 文件。

参考

  1. webpack development guides
  2. webpack production guides
上次更新: 4/5/2021, 2:06:54 PM