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

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

11.原创不易，转载请保留原地址