最简易方式使用webpack打包TypeScript

最新推荐文章于 2024-04-27 08:39:59 发布

Xu.Youth

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量276

点赞数 4

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_60646136/article/details/126443003

版权

1、新建入口文件

src/main.ts

document.write('我又变帅了')

2、新建index页面

public/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>打包TypeScript</title>
  </head>

  <body></body>
</html>

3.新建webpack.config.js

build/webpack.config.js

webpack.config.js的相关配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

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: resolve('dist'), //将打包好的文件放到dist目录里面
        filename: '[name].[contenthash:8].js' //产生的js文件是以app加上8位的哈希值.js来命名的
    },

    module: {
        rules: [ //rules主要是通过ts-loader这个包针对于ts文件，针对src目录里面的ts和tsx文件进行编译处理操作
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                include: [resolve('src')]
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin({ //会将dist目录中以前打包的js文件进行清楚
        }),

        new HtmlWebpackPlugin({ //针对于./public/index.html进行打包的
            template: './public/index.html'
        })
    ],

    resolve: {
        extensions: ['.ts', '.tsx', '.js'] //针对于'.ts', '.tsx', '.js'这三种文件进行处理引入文件可以不写他的扩展名
    },
    //针对于代码的错误提示
    devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

    devServer: {
        host: 'localhost', // 主机名
        stats: 'errors-only', // 打包日志输出输出错误信息
        port: 8081, //端口
        open: true //自定打开浏览器
    },
}

4、初始化package.json文件

npm init -y

5、生成ts自动编译配置文件

tsc --init

6、下载相关依赖

npm install -D typescript@4.0.5
npm install -D webpack@4.41.5 webpack-cli@3.3.10
npm install -D webpack-dev-server@3.10.2                  启动开发服务器的
npm install -D html-webpack-plugin@4.5.0                  打包html内容  
npm install -D clean-webpack-plugin@3.0.0                 清除之前打包好的js文件
npm install -D ts-loader@8.0.11                           针对ts文件进行编译处理
npm install -D cross-env@7.0.2                            涉及跨平台命令

7、配置打包命令

在package.json文件中的scripts内配置打包命令

dev:生产环境 build:开发环境

"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"