基础-前端工程化配置项目

前端工程化的核心就是webpack了,而光看官方不行,不能闭门造车啊,所以必须游离于各大社区,学习各位大佬的技术与见解,亲自动手配置项目才行。之前有提到一个前端工程化的学习之路,那包含了模块化、包管理器、构建工具、脚手架,这次的项目配置练习就多多少少涉及到其中的知识点了。

开搞,练习配置一个ts + vue的工程。

一、 构建项目初始目录

1. 生成ts的配置文件

命令:tsc --init

基础-前端工程化配置项目
(tips:如果电脑是mac,且提示zsh: command not found: tsc,那就先安装ts,命令:sudo npm install typescript -g //全局安装typesrcpt)

现在这个文件报错哈,先配一下,让它去找src目录下的文件。

  {
     ...
     "include": [
       "src/**/*"
    ]
  }
  

2.生成package.json文件

命令:npm init -y

基础-前端工程化配置项目

3.新增其他文件

webpack.config.jsindex.html

4.新建src文件夹

新增文件,main.jsApp.vueshim.d.ts

基础-前端工程化配置项目

二、安装webpack依赖

这里就是涉及包管理构建工具的基础知识了。

1. 安装 webpack相关

依赖:webpackwebpack5以上需要一起安装webpack-cli

命令:npm i webpack webpack-cli -D

基础-前端工程化配置项目

现在安装完这两个依赖就可以打包了,但开发的时候需要看效果哈,所以还得再本地开个服务,就是开发服务器哈。

依赖:webpack-dev-server

命令:npm i webpack-dev-server -D

基础-前端工程化配置项目

现在和webpack相关的是安装完了。

基础-前端工程化配置项目
还有配置一下打包和启动命令。

基础-前端工程化配置项目

3.基本配置webpack.config.js

1. 基本打包配置

webpack是基于node.js环境的,所以按照CommonJs标准进行模块导出。
使用webpack提供的声明文件,则相关属性有智能提示。

const { Configuration } = require("webpack"); //声明文件
const path = require("node:path");

/**
 * @type{Configuration}
 */

const config = {
  mode: "development",
  entry: "./src/main.ts", //入口文件
  output: path.resolve(__dirname, "dist"), //生成目录
  filename: "bundle.js", //打包后的文件
};

module.exports = config;

到这里已经是可以进行打包了,可以实验一下。

基础-前端工程化配置项目

基础-前端工程化配置项目

这样就是基本的打包功能已经实现了哈😉!!

2. 解析js语法配置

解析文件配的是loader,比如