webpack搭建腳手架打包TypeScript代碼

更新時(shí)間：2021年09月21日 08:45:02 作者：老張?jiān)诰€(xiàn)敲代碼

本文主要介紹了webpack搭建腳手架打包TypeScript代碼，文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

創(chuàng)建文件夾

目錄結(jié)構(gòu)： dabaots

初始化 npm init -y生成package.json文件

目錄結(jié)構(gòu)：
dabaots
dabaots / package.json

然后在開(kāi)發(fā)環(huán)境中安裝以下幾個(gè)工具

npm i -D

webpack··························（打包代碼的核心工具
webpack-cli·····················（webpack的命令行工具）
typescript ·······················（寫(xiě)ts所需的核心包）
ts-loader ·························（通過(guò)ts-loader可以對(duì)webpack和ts進(jìn)行整合）
html-webpack-plugin … （是自動(dòng)生成html的一個(gè)webpack插件）
webpack-dev-server … (無(wú)需刷新更新頁(yè)面)
clean-webpack-plugin … ( 每次打包上線(xiàn)之前都會(huì)自動(dòng)清空dist內(nèi)的文件如何重新生成最新的文件)
"@babel/core" “@babel/preset-env” babel-loader core-js（安裝babel轉(zhuǎn)換，你是什么環(huán)境他就會(huì)轉(zhuǎn)成什么代碼）

可能會(huì)遇到的小問(wèn)題：這里可能會(huì)出現(xiàn)的問(wèn)題就是你下載的依賴(lài)包webpack-dev-server版本如果和谷歌的不適配，建議將插件版本改低一點(diǎn)或者谷歌瀏覽器升級(jí)成最新版本否則會(huì)出現(xiàn)錯(cuò)誤Cannot GET /chrome.exe

接下來(lái)創(chuàng)建webpack.config.js進(jìn)行配置

目錄結(jié)構(gòu)：
dabaots
dabaots / package.json
dabaots / webpack.config.js

// 引入一個(gè)包
const path = require("path")

//引入自動(dòng)生成html的包
const HtmlWebpackPlugin = require("html-webpack-plugin")

//引入更新dist文件的插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack中的所有的配置信息都應(yīng)該寫(xiě)入moudle.exports中
module.exports={
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目錄
    output:{
        // 指定打包文件的目錄
        path:path.resolve(__dirname,"dist"),
        // 指定打包后文件的文件
        filename:"bundle.js",
        //編譯的時(shí)候不使用箭頭函數(shù)
        environment: {
            arrowFunction: false
        }
    },
    
    //webpack打包時(shí)要使用到module這個(gè)模塊
    module:{
        // 指定要加載的規(guī)則
        rules:[{
            // test指定的是規(guī)則生效的文件
            test:/\.ts$/,
            // use是要使用的loader
            //配置babel
            use:[
                {//指定加載器
                    loader:"babel-loader",
                    options:{
                        //設(shè)置預(yù)定義環(huán)境
                        presets:[
                            [
                                //指定環(huán)境的插件
                                "@babel/preset-env",
                                //配置信息
                                {
                                    //要兼容的瀏覽器
                                    targets:{
                                        "chrome":"88"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    //表示按需加載
                                    "useBuiltIns":"usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            //設(shè)置不被打包上傳的文件
            exclude:["/node_modules/"]
        }]
    },
    
    // 配置webpack插件
    plugins:[
        new HtmlWebpackPlugin({
            // 自定義html模板地址
            template:"./src/index.html"
        }),
        //每次打包上線(xiàn)之前都會(huì)自動(dòng)清空dist內(nèi)的文件如何重新生成最新的文件
        new CleanWebpackPlugin()
    ],
    
    resolve:{
        //解決在ts文件內(nèi)部單獨(dú)引入其他ts包時(shí)候報(bào)錯(cuò)的問(wèn)題
        extensions:['.ts','.js']
    }
}

最后在package.json中寫(xiě)入打包及運(yùn)行等腳本