欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用webpack打包ts代碼的實(shí)現(xiàn)

 更新時(shí)間:2022年06月26日 16:46:00   作者:Errol_King  
本文主要介紹了使用webpack打包ts代碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用 webpack 打包

生成 package.json

本質(zhì)上,webpack 是一個(gè)用于現(xiàn)代 JavaScript 應(yīng)用程序的 靜態(tài)模塊打包工具。在我們的項(xiàng)目中要使用 webpack 首先應(yīng)該初始化,生成的默認(rèn)的 package.json,執(zhí)行 npm init -y 后會(huì)在項(xiàng)目根目錄下生成 package.json(其中 -y 是直接略過(guò)所有問(wèn)答,直接都 yes)

在這里插入圖片描述

安裝 cnpm

接下來(lái)需要安裝 webpack 所需依賴(lài),我們可以使用 npm 或 cnpm 安裝。這里說(shuō)點(diǎn)題外話。npm 作為包管理器,由于服務(wù)器不在國(guó)內(nèi)所以有的時(shí)候速度會(huì)慢一點(diǎn),所以我們來(lái)安裝淘寶團(tuán)隊(duì)的 cnpm,這個(gè)就是 npm 在國(guó)內(nèi)的鏡像,執(zhí)行以下命令來(lái)安裝 cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

使用 cnpm -v來(lái)檢查是否安裝成功

在這里插入圖片描述

安裝 webpack 相關(guān)

cnpm i -D webpack webpack-cli typescript ts-loader

i 是 install 的簡(jiǎn)寫(xiě)
-D 表示安裝到開(kāi)發(fā)環(huán)境,也就是安裝并將依賴(lài)信息寫(xiě)在 package.json 中的 devDependencies中,等同于 --save-dev
webpack 安裝打包工具的核心代碼
webpack-cli webpack 命令行工具
typescript ts的核心包
ts-loader 必須安裝這個(gè)才能讓 ts 在 webpack 中使用

執(zhí)行命令后,查看 package.json,多了 devDependencies 節(jié)點(diǎn),說(shuō)明安裝成功啦

在這里插入圖片描述

編寫(xiě) webpack 配置文件

新建一個(gè) webpack.config.js 文件到根目錄

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

//webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目錄
    output: {
        //指定打包文件的目錄
        path: path.resolve(__dirname, 'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包時(shí)使用的模塊
    module: {
        //指定要加載的規(guī)則
        rules: [
            {
                //test 指定規(guī)則生效的文件,以下匹配以 ts 結(jié)尾的文件
                test:/\.ts$/,
                //要使用的loader,用 ts-loader 處理以 ts 結(jié)尾的文件
                use: 'ts-loader',
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    }
};

創(chuàng)建 tsconfig.json

上節(jié)我們已經(jīng)講了,先寫(xiě)這些:

{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "strict": true
  }
}

修改 package.json

 "build": "webpack"

增加位置如下:

在這里插入圖片描述

使用webpack打包

命令:npm run build

在 webpack.config.js 中我們指定了入口文件為 index.ts,我們?cè)诶镞呺S便編寫(xiě)一些內(nèi)容

index.ts

function sum(a:number,b:number):number{
    return a+b;
}

console.log(sum(11,22));

在 webpack.config.js 中我們指定了打包文件的目錄為 dist,打包后的文件名是 bundle.js,所以執(zhí)行命令npm run build后就使用 webpack 進(jìn)行了打包,結(jié)果如下:

在這里插入圖片描述

到此為止,我們就實(shí)現(xiàn)了最簡(jiǎn)單的使用 webpack 打包的功能

安裝插件

html-webpack-plugin

① 安裝插件
執(zhí)行 cnpm i -D html-webpack-plugin
html-webpack-plugin 幫助我們自動(dòng)生成 html 文件

② 引入插件
webpack.config.js 中引入插件

//引入一個(gè)包
......
//引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin")

//webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中
module.exports = {
    ......

    //配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(),
    ]
};

③打包
先執(zhí)行 npm run build

這樣目錄下就生成了 html 文件

在這里插入圖片描述

我們可以自定義標(biāo)題或其他一些內(nèi)容

	//配置webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            title: "自定義標(biāo)題"
        }),
    ]

還可以設(shè)置一個(gè)網(wǎng)頁(yè)模板,我們可以在 src 下新建一個(gè) index.html 做為模板

在這里插入圖片描述

然后在 webpack.config.js 中將其設(shè)置為模板

	plugins: [
        new HTMLWebpackPlugin({
            template: "./src/index.html"
        }),
    ]

再次運(yùn)行 npm run build 生成的網(wǎng)頁(yè)就是根據(jù)剛才寫(xiě)好的模板生成的

在這里插入圖片描述

webpack-dev-server

①、執(zhí)行cnpm i -D webpack-dev-server
②、在 pages.json 中 scripts 節(jié)點(diǎn)下增加 "start": "webpack serve --open"

在這里插入圖片描述

意思是啟動(dòng) webpack 服務(wù)器,這樣我們剛才生成的 html 會(huì)用默認(rèn)瀏覽器打開(kāi)

③、運(yùn)行
直接點(diǎn)擊上邊截圖的運(yùn)行三角形,或者執(zhí)行 npm start

如果報(bào)錯(cuò) The mode option has not been set......

在這里插入圖片描述

解決辦法
在 webpack.config.js 中根節(jié)點(diǎn)下增加 mode: 'development'

(如果還處在上次命令,可以按 ctrl+c 終止命令)再次執(zhí)行 npm start 即可打開(kāi)默認(rèn)瀏覽器

在這里插入圖片描述

這個(gè)網(wǎng)頁(yè)是實(shí)時(shí)更新的,我們修改 index.ts ,多輸出一行文字,右側(cè)瀏覽器也會(huì)自動(dòng)輸出

在這里插入圖片描述

clear-webpack-plugin

這個(gè)插件的作用是每次編譯會(huì)先清空編譯文件夾下的文件,再生成,這樣就保證了都是最新文件

①、安裝

cnpm i -D clean-webpack-plugin

②、引入、配置

//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

 //配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        ......
    ],

babel

babel 用來(lái)解決兼容性問(wèn)題

①、安裝

cnpm i -D @babel/core @babel/preset-env babel-loader core-js

②、配置
修改 webpack.config.js

......

//webpack 中的所有配置都應(yīng)該寫(xiě)在 module.exports 中
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件所在目錄
    output: {
        ......
        //告訴webpack不使用箭頭函數(shù)
        environment: {
            arrowFunction: false
        }
    },
    //指定webpack打包時(shí)使用的模塊
    module: {
        //指定要加載的規(guī)則
        rules: [
            {
                //test 指定規(guī)則生效的文件,以下匹配以 ts 結(jié)尾的文件
                test:/\.ts$/,
                //要使用的loader,用 ts-loader 處理以 ts 結(jié)尾的文件
                use: [
                    //配置babel
                    {
                        //指定加載器
                        loader:'babel-loader',
                        //設(shè)置 babel
                        options: {
                            //設(shè)置預(yù)定義的環(huán)境
                            presets:[
                                //指定環(huán)境插件
                                '@babel/preset-env',
                                //配置信息
                                {
                                    //要兼容的目標(biāo)瀏覽器
                                    targets:{
                                        "chrome":88
                                    },
                                    //指定corejs版本
                                    "corejs":"3",
                                    //使用corejs的方式 usage表示按需加載
                                    "useBuiltIns":"usage",
                                }
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    ......
};

加載器的順序是從后往前執(zhí)行,所以先用 ts-loader 將 ts 轉(zhuǎn)為 js,然后使用 babel-loader 將新版本的 js 轉(zhuǎn)換為 舊版本的 js

模塊問(wèn)題

新建 m1.ts 暴露一個(gè) hi

在這里插入圖片描述

index.ts 中引入 m1 并打印 hi

在這里插入圖片描述

執(zhí)行 npm run build 會(huì)報(bào)錯(cuò):

在這里插入圖片描述

這時(shí)我們需要修改 webpack.config.js 中配置,增加

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

Resolve 配置 webpack 如何尋找模塊對(duì)應(yīng)的文件,在導(dǎo)入語(yǔ)句沒(méi)帶文件后綴時(shí),webpack 會(huì)自動(dòng)帶上后綴去嘗試訪問(wèn)文件是否存在。resolve.extensions 用于配置在嘗試過(guò)程中用到的后綴列表

到此這篇關(guān)于使用webpack打包ts代碼的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)webpack打包ts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • lodash中pick和omit函數(shù)的用法介紹

    lodash中pick和omit函數(shù)的用法介紹

    這篇文章介紹了lodash中pick和omit函數(shù)的用法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • three.js中文文檔學(xué)習(xí)之通過(guò)模塊導(dǎo)入

    three.js中文文檔學(xué)習(xí)之通過(guò)模塊導(dǎo)入

    這篇文章主要給大家介紹了關(guān)于three.js中文文檔學(xué)習(xí)之通過(guò)模塊導(dǎo)入的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或使用three.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • 最新評(píng)論