1.需求分析、基本配置[webpack搭建vue3脚手架]

发布于 2022年 01月 24日 06:36

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

脚手架git地址 持续更新中....

概览

vue3出来之后vue-cli新增了其脚手架，不得不说真的很香，就想着能不能使用webpack捣鼓一个高仿品。一方面是加深对webpack的学习，另一方面试扩展自己对ts、eslint配置的熟悉，还有就是将其搬到工作中，拥有更好的开发体验。

需求分析

既然是模仿，第一步肯定是体验vue-cli创建的项目。个人体验之后感受如下：

  1. hrm良好的支持，开发效率提高
  2. 良好的ts支持，良好的ts语法错误提示。
  3. eslint对vue3的良好支持，更好的代码规范。

第二步是提取核心功能：

webpack基础配置

接下来对webpack进行基础配置。基本要求：

  1. 简单易懂的目录结构。
  2. 配置根据环境进行分离。
  3. 常见插件配置

目录结构

依赖安装

  1. 使用命令：npm init -y生成一份package.json文件
  2. 所需依赖及版本（基本都是用的最新的）如下
"devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.62.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0",
    "webpack-merge": "^5.8.0"
  }

脚本命令

package.json下新增两个脚本命令，开发与打包的命令。

"scripts": {
    "dev": "webpack-dev-server --config build/webpack.dev.js",
    "build": "webpack --config build/webpack.prod.js"
},

common基本配置

开发与生产共有的配置。

入口

entry: path.resolve(process.cwd(), './src/index.js'),

出口

output: {
    filename: '[name].bundle.js',
    path: path.resolve(process.cwd(), './dist')
  }

插件配置

这里我们主要配置一下html-webpack-plugin

plugins: [
    new HtmlWebpackPlguin({
      template: path.resolve(process.cwd(), './public/index.html')   
    })
]

webpck.common.js完整代码

const path = require('path')
const HtmlWebpackPlguin = require('html-webpack-plugin')
module.exports = {
  entry: path.resolve(process.cwd(), './src/index.js'),
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(process.cwd(), './dist')
  },
  plugins: [
    new HtmlWebpackPlguin({
      template: path.resolve(process.cwd(), './public/index.html')   
    })
  ]
}

dev开发配置

配置合并

使用webpack-merge用于dev配置文件与common配置合并

const { merge } = require('webpack-merge')
const common = require('./webpack.common')
module.exports = merge(common, {
    mode: 'development',
})

serve配置

devServer: {
    hot: true,
    port: 8080
}

sourcemap配置

sourcemap根据自己需求选用，官网

devtool: "eval-source-map"

webpack.dev.js完整代码

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'development',
  // 配置serve
  devServer: {
    hot: true,
    port: 8080
  },
  // 配置sourcemap
  devtool: "eval-source-map"
})

prod生产配置

这一章没什么生产配置，只是在webpack.prod.js中指明其是生产环境

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'production',
})

总结

webpack的基本配置就建立起来了，使用npm run dev进行开发，使用npm run build进行打包！下一章我们将配置vue3和一些常用loader(sass-loader、url-loader等)。

推荐文章