webpack 仿写实现vue脚手架的构建，实现一个webpack打包typescript（ts）类似vue脚手架项目的一个搭建

最新推荐文章于 2024-08-29 16:21:36 发布

原创最新推荐文章于 2024-08-29 16:21:36 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #webpack #vue.js

vue 专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何从零开始使用Webpack搭建一个类似Vue的脚手架项目，包括安装TypeScript，创建项目目录结构，配置Webpack，安装必要依赖，设置package.json和tsconfig.json，以及启动和打包项目的过程。通过这个教程，读者可以掌握基于Webpack的TypeScript项目构建技巧。

webpack 仿写实现vue脚手架的构建

实现一个webpack打包typescript（ts）类似vue脚手架项目的一个搭建

1. 使用node js 全局安装 Ts,并验证是否安装成功

npm install typescript -g

// 验证是否安装成功
tsc -v

2. 新建一个文件夹创建src目录，并建立主入口文件main.ts和view视图文件夹

在这里插入图片描述

3. 和src同级别目录下创建public文件夹并创建子文件index.html

4.配置webpack

①创建与src同级别的build目录并创建webpack.config.js的子文件并写入以下代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production'
// 封装目录
function resolve(dir) {
  return path.resolve(__dirname, '..', dir)
}
module.exports = {
  //判断环境
  mode: isProd ? 'production' : 'development',
  entry: {
    app: './src/main.ts'
  },
  output: {
    // path: path.resolve(__dirname, 'dist'),
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js'
  },
  module: {
    rules: [
      {
          test:  /\.tsx?$/,
          use:'ts-loader',
          // include: [path.resolve(__dirname, 'src')]
          include: [resolve('src')]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), //之前打包的dist 文件清除掉
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js', 'json']
  },

  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  devServer: {
    host:'localhost',
    stats:'errors-only', //错误信息处理
    port:8081,
  },
}

5.生成package.json和tsconfig.json配置文件

①在根目录下打开cmd 命令窗口输入npm init -y
②接着在cmd命令窗口输入tsc --init

生成文件如下图所示
在这里插入图片描述

6.下载依赖

npm install -D typescript
//webpack打包以及启动服务器依赖
npm install -D webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
//打包html
npm install -D clean-webpack-plugin html-webpack-plugin
//编译ts 文件
npm install -D ts-loader

7.配置package.json 如下图

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

在这里插入图片描述

8.启动和打包项目

// 启动
npm run dev
// 打包
npm run build

9.见证奇迹的时刻

@ 可以看到已经成功的启动了项目
在这里插入图片描述

10.案例地址

https://gitee.com/huazi-zhanye/webpack-tovue.git