开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

简述

前端工程化是一个关于使用技术对web开发进行自动化的过程。它通常涉及使用 npm/yarn 、GNU/Make、Webpack 等技术来构建和测试应用，以及你需要做出能耗时间最小、省力且准确性高的操作。同时，由于 JavaScript 语言具有不断变化的特性，因此前端工程也需要调整以更好的适应环境。

一般而言，前端工程化的目标是增强应用的可维护性，可重复性，可扩展性以及增加开发者的生产力。以下是一些前端工程常见的工具：

NPM/Yarn：主流的包管理器，帮助维护代码中使用到的依赖。
webpack：自动化构建构建应用的 JavaScript bundle。
Babel：将新版本的以及浏览器不支持的 JavaScript 代码转换成浏览器可识别的版本。
ESLint：遵循一组规范来自动检验 JavaScript 代码质量。
等等

例如：vue、react、Angular，内部就使用了vite或webpack来实现工程化管理。

使用webpack工程项目

1.初始化npm管理所有依赖

npm init -y

2.需要下载的依赖

  "devDependencies": {
    // 展示网页入口文件
    "html-webpack-plugin": "^5.5.0",
    // 解析ts代码(根据业务需要)
    "ts-loader": "^9.4.2",
    // webpack打包
    "webpack": "^5.75.0",
    // webpack构建工具
    "webpack-cli": "^5.0.1",
    // webpack热更新
    "webpack-dev-server": "^4.11.1"
  },

3.webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
let env = process.env.npm_lifecycle_event
module.exports = {
  // 根据环境打包
  mode: env === 'dev' ? 'development' : 'production',
  // 入口文件
  entry: './src/main.ts',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    // 需要打包依赖类型
    library: {
      name: 'webLoading',
      type: 'umd',
      export: 'default'
    }
  },
  // 文件类型
  resolve: {
    extensions: ['.ts', '.js']
  },
  // 热启动配置
  devServer: {
    port: 8888,
    open: true,
    hot: true
  },
  // loader解析
  module: {
    rules: [
      {
        test: /.ts$/,
        loader: 'ts-loader',
        exclude: ["/node_modules/"],
        options: {
          configFile: path.resolve(__dirname, 'tsconfig.json')
        }
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

ts-loader默认找根目录tsconfig.json配置文件解析

4.tsconfig.json

{
  "compilerOptions": {
    "module": "ES2020",
    "target": "ES2020",
    "strict": true,
    "moduleResolution": "node",
    "removeComments": true 
  },
  "include": [
    "./src/*"
  ],
  "files": [
    "./src/index.ts"
  ]
}

注意：moduleResolution设置为none才可以直接引入node_modules里插件

5.新建文件夹src->main.ts 入口文件

console.log('webpack')

6.index.html 界面入口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web-loading</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid gainsboro;
    }
  </style>
</html>

7.package.json 设置启动命令

{
  "name": "xxxx",// 项目名
  "version": "1.0.0",// 版本
  "description": "",// 描述
  "main": "/dist/main.ts",// 引入的默认文件,import 'xxx',最终指向的文件
  "scripts": {
    "dev": "webpack-dev-server" // webpack热启动允许指令
  },
  //----
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
  }
}
> webpack-dev-server 启动会默认找根目录webpack.config.js文件进行解析

8.完成工程项目搭建，启动项目。

    npm run dev

附：以上是手动创建所有文件，也可以通过webpack-cli自动创建

npm i webpack-cli @webpack-cli/init
npx webpack-cli init

手把手创建一个webpack前端工程项目

简述

使用webpack工程项目