返回

手写 VUE-CLI，初体验 Webpack

开发工具

亲自动手打造属于你的 Vue-CLI：深度探索 Webpack

踏上前端开发之旅，Vue-CLI 是你不可或缺的伴侣。作为 Vue.js 官方脚手架，它让项目创建变得轻而易举，并提供开箱即用的构建工具和配置，解放你的双手，让你专注于业务逻辑。

神秘的 Webpack：模块构建的魔力

Webpack 是现代 JavaScript 模块构建器，它的超能力在于将各种前端资源（例如 JavaScript、CSS、图像）打包成可供浏览器加载的静态资源。在 Vue 项目中，配置 Webpack 至关重要，因为它决定了项目的构建方式。

手把手教你打造 My-VUE-CLI

  1. 复制 Vue-CLI 源码：不同的 Vue-CLI 版本对应不同的源码地址，所以请注意选择。
  2. 安装依赖并构建项目： 
    yarn
yarn build

My-VUE-CLI 的项目结构

项目创建后，你会看到标准的 Vue.js 项目结构：

  • src：存放源代码。
  • node_modules：存放依赖库。
  • public：存放静态资源，如图像和字体。
  • package.json：项目配置。

初始化 Webpack

在项目根目录下，安装 Webpack：

npm install webpack webpack-cli --save-dev

添加项目结构

创建一个 src 目录，并在其中创建一个 main.js 文件作为入口文件。

入口文件

在 main.js 中，引入 Vue.js 并创建一个 Vue 实例：

import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: 'Hello, World!'
  }
})

加载器

为了处理不同的文件类型，你需要安装相应的加载器：

npm install babel-loader @babel/core --save-dev

在 webpack.config.js 中配置加载器：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader'
    }
  ]
}

插件

插件可以优化构建过程：

npm install html-webpack-plugin --save-dev

在 webpack.config.js 中配置插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module: {
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

启动项目

在项目根目录下，运行以下命令启动项目：

npm run serve

热更新

为了让代码在保存后自动更新，你需要配置热更新：

npm install webpack-dev-server --save-dev

在 webpack.config.js 中配置热更新：

devServer: {
  hot: true
}

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

代码分割

当项目庞大时，代码分割可以减少初始加载时间：

npm install webpack-bundle-analyzer --save-dev

在 webpack.config.js 中配置代码分割：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

压缩

压缩可以减小生产环境下的代码体积：

npm install uglifyjs-webpack-plugin --save-dev

在 webpack.config.js 中配置压缩：

optimization: {
  minimizer: [
    new UglifyJsPlugin()
  ]
}

Tree shaking

Tree shaking 是一种高级优化技术，可以去除未使用的代码：

npm install @babel/plugin-transform-modules-commonjs --save-dev

在 webpack.config.js 中配置 Tree shaking：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        plugins: [
          '@babel/plugin-transform-modules-commonjs'
        ]
      }
    }
  ]
}

HMR

HMR（热模块替换）可以自动更新浏览器内容，无需重新加载页面：

npm install webpack-hot-middleware --save-dev

在 webpack.config.js 中配置 HMR：

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

常见问题解答

  1. Vue-CLI 的好处是什么？
    Vue-CLI 快速创建项目，提供开箱即用的构建工具和配置，简化前端开发。
  2. Webpack 的作用是什么？
    Webpack 将各种前端资源打包成可供浏览器加载的静态资源。
  3. 热更新是如何工作的？
    热更新使代码在保存后自动更新，无需重新加载页面。
  4. 代码分割的好处是什么？
    代码分割可以减少初始加载时间，特别是在项目庞大的情况下。
  5. Tree shaking 是什么？
    Tree shaking 是一种高级优化技术，可以去除未使用的代码。

结论

通过动手打造属于自己的 Vue-CLI，你不仅学会了 Webpack 的基本概念，还深刻理解了它的工作原理。这将为你在未来构建更强大、更复杂的前端项目奠定坚实的基础。