話不多說, 直接上手啦!

一、打包項目

• 創(chuàng)建一個項目文件夾并 初始化項目 npm init -y

• 生成 package.json 配置文件

• 修改文件, 增加 bulid 命令 "build": "webpack",
  

  image.png

• webpack 部分

  • 安裝 webpack 需要的一些依賴

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

  • 創(chuàng)建 webpack 的配置文件 webpack.config.js

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


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

   // 指定入口文件
   entry: "./src/index.ts",

   // 指定打包文件所在目錄
   output: {
       // 指定打包后的目錄
       path: path.resolve(__dirname, 'dist'),

       // 打包后文件的文件名
       filename: "bundle.js"
   },


   // 指定 webpack 打包時要使用模塊
   module: {

       // 指定要加載的規(guī)則
       rules: [{
           // test 指定規(guī)則生效的文件
           test: /\.ts$/,
           // 要使用的 loader
           use: 'ts-loader',
           // 要排除的文件
           exclude: /node_modules/
       }]

   }
}

• TypeScript 部分
  • 創(chuàng)建 typescript 配置文件

    tsc --init

• 生成文件 tsconfig.json

{
  "compilerOptions": {
    
    "target": "es5",                            
    
    "module": "commonjs",                      
  
    "strict": true,                               
   }
}

• 執(zhí)行 npm run build 進(jìn)行打包, 生成打包文件, 這時候就能看到打包后的效果啦, 下面再讓我們看看怎么把項目運行起來吧!

二、運行項目

• 安裝 webpack 插件, 使的打包后會自動創(chuàng)建 html 文件, 并自動引入相關(guān)的 js 文件

  npm i -D html-webpack-plugin

• 配置 webpack.config.js 文件
  image
  
  
  image.png
• 安裝 webpack 開發(fā)服務(wù)器插件 ( 可以根據(jù)項目的改變自動刷新 )

  npm i -D webpack-dev-server

  • 安裝時要注意版本兼容問題, webpack 5 版本不兼容 比較高版本的 webpack-dev-server, 所以這里安裝的是 npm i -D webpack-dev-server@3.11.2
  • 配置 package.json 文件 "serve": "webpack serve --open chrome.exe",
    
    image.png
• 執(zhí)行 npm start 啟動項目
• 安裝 webpack 插件, 在打包之前清除 dist 目錄下的舊文件, 再生成新文件, 避免緩存

  npm i -D clean-webpack-plugin

  • 引入插件并配置
    image
    image
• 給 webpack 設(shè)置可引用模塊

  • 用來設(shè)置引用模塊 (這樣配置自后, 里面索設(shè)置的文件類型可以作為模塊引用)

    
    
    image

三、 處理兼容性( 兼容 不同瀏覽器 )

• 安裝 babel 依賴

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

  image.png
• 配置 webpack.config.js 文件 ( 在 module 中 配置 babel )

    // 指定 webpack 打包時要使用模塊
    module: {

        // 指定要加載的規(guī)則
        rules: [{
            // test 指定規(guī)則生效的文件
            test: /\.ts$/,
            // 要使用的 loader
            use: [

                // 配置 babel
                {

                    // 指定加載器
                    loader: "babel-loader",

                    // 設(shè)置 babel
                    options: {

                        // 設(shè)置預(yù)定義的環(huán)境(假設(shè)代碼要運行的瀏覽器環(huán)境)
                        presets: [
                            [
                                // 指定環(huán)境的插件
                                "@babel/preset-env",

                                // 配置信息
                                {
                                    // 要兼容的目標(biāo)瀏覽器
                                    targets: {
                                        "chrome": "58",
                                        "ie": "11"
                                    },

                                    // 指定 corejs 的版本
                                    "corejs": "3",

                                    // 使用 corejs 的方式, "usage" 表示按需加載
                                    "useBuiltIns": "usage"

                                }
                            ]
                        ]

                    }

                },

                'ts-loader',
            ],
            // 要排除的文件
            exclude: /node_modules/
        }]

    },

• 為兼容 低版本瀏覽器, 設(shè)置 webpack 打包時, 不使用箭頭函數(shù)
  image.png

• 打包后的結(jié)果
  image.png

四、附上完整 dome 地址, 可在里面 Typescript 更多配置項 文件夾中查看, 更多 TS 常用配置項

https://github.com/chenyanNc/TSWebpackDome.git

文筆不好請多見諒 (????)，歡迎指摘呀 ~~~