解读[webpack搭建vue3脚手架]的内在奥秘

2023-12-28 04:48:12

自从Vue 3问世以来，其官方脚手架Vue CLI也增添了对它的支持，着实让人眼前一亮。然而，好奇心驱使之下，我不禁想要探究一番：能否借助Webpack打造一个与其类似的高仿品？如此一来，不仅可以加深对Webpack的理解，更能亲身体验脚手架搭建的魅力。

Webpack：模块加载和构建工具的集大成者

Webpack是一个强大的模块加载器和构建工具，它能够将各种资源（如JS、CSS、图像）打包成一个或多个bundle。其核心原理在于将模块作为构建的最小单位，通过模块依赖关系图构建出完整的应用代码。

使用Webpack搭建Vue 3脚手架，我们首先需要创建一个新的项目目录。接下来，安装Webpack、Vue CLI和必要的依赖项：

mkdir my-vue3-scaffold
cd my-vue3-scaffold
npm init -y
npm install webpack webpack-cli vue vue-loader @vue/cli-plugin-babel @vue/cli-service

脚手架的基本构成

一个脚手架通常包含以下几个组成部分：

项目初始化脚本：用于创建新项目并安装依赖项。
开发服务器：用于在本地启动项目并监听文件更改。
构建脚本：用于将项目打包成生产就绪的代码。

打造Webpack版Vue 3脚手架

项目初始化

创建项目初始化脚本create.js：

const fs = require('fs');
const path = require('path');
const execa = require('execa');

module.exports = async function create(appName) {
  // 创建项目目录
  fs.mkdirSync(appName);
  process.chdir(appName);

  // 安装依赖项
  await execa('npm', ['init', '-y']);
  await execa('npm', ['install', 'webpack', 'webpack-cli', 'vue', 'vue-loader', '@vue/cli-plugin-babel', '@vue/cli-service']);

  // 创建基本的项目结构
  fs.writeFileSync('src/main.js', 'import { createApp } from "vue";\nconst app = createApp({});\napp.mount("#app");');
  fs.writeFileSync('public/index.html', '<div id="app"></div>');

  // 添加启动脚本
  const packageJson = require('./package.json');
  packageJson.scripts = {
    'dev': 'webpack serve',
    'build': 'webpack'
  };
  fs.writeFileSync('package.json', JSON.stringify(packageJson, null, 2));

  console.log('项目创建完成！');
};

开发服务器

创建开发服务器脚本serve.js：

const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');

const config = require('./webpack.config.js');

const server = new webpackDevServer(webpack(config), {
  contentBase: './public',
  hot: true
});

server.listen(8080, 'localhost', () => {
  console.log('开发服务器已启动：http://localhost:8080');
});

构建脚本

创建构建脚本build.js：

const webpack = require('webpack');

const config = require('./webpack.config.js');

webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err || stats.compilation.errors);
  } else {
    console.log('构建完成！');
  }
});

Webpack配置

创建Webpack配置文件webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: './public',
    hot: true
  }
};