webpack打包TS代码的基本配置

一、新建项目

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

二、下包

----- 开发依赖
----- cnpm i -D webpack webpack-cli typescript ts-loader

三、配置webpack.config.js文件

最基本的webpack.config.js的配置
// 引入一个包
const path = require('path')

module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在的目录
    output: {
        // path:"./dist"
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件
                filename: "bundle.js"
    },
    // 指定webpack打包是要使用模块
        module: {
            // 指定要加载的规则
      rules: [
        {
          // test 指定的是规则生效的文件，对谁进行编译
          test: /\.ts$/,
          // 要使用的loader， 使用loader对ts文件进行编译
          use: 'ts-loader',
          // 要排除的文件
          exclude: /node-modules/
        }
      ]
        }

}

四、配置 tsconfig.js 文件

最基本的 tsconfig.js 的配置需要的时候在加
{
  "compilerOptions": {
    // module 指定要使用的模块化
    "module": "ES2015",
    // target 指定JS编译版本 
    "target": "ES2015",
    // 所有严格检查的总开关
    "strict": true
  }
}

五、在package.json 文件中添加打包指令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // npm run builder 一件打包
  },

六、继续下包
开发依赖html-webpack-plugin，及其配置信息
       自动创建html文件并引入JS文件
----cnpm i -D html-webpack-plugin

 在webpack.config.json文件中的配置信息
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

// 配置webpack插件，与module同级
    plugins: [
      new HTMLWebpackPlugin(
        { 
          // 自定义title
          // title: "模板"
          // 指定模板
          template:"./src/index.html"
        }
      ),
    ]

开发依赖webpack-dev-server及其配置信息, 根据项目的改变自动刷新

-----cnpm i -D webpack-dev-server

在package.json中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe" // npm start 运行并打开，响应式刷新数据
  },

开发依赖clean-webpack-plugin及其配置信息, 先把dist文件删除，在打包，时刻保持最新

----cnpm i -D clean-webpack-plugin

在webpack.config.json文件中的配置信息
// 配置webpack插件，与module同级

plugins: [
      new CleanWebpackPlugin(),
]

// 用来设置引用模块，与plugins: 同级
    resolve: {
      // .ts, .js 文件都可当作模块使用
      extensions: ['.ts','.js']
    }

export const test = 'heelo'

import {test} from './m1';

开发依赖@babel/core @babel/preset-env babel-loader core-js及其配置信息, 兼容不同语法及适配不同浏览器环境

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

webpack。config。js中配置多加载器

// 指定webpack打包是要使用模块
        module: {
            // 指定要加载的规则
      rules: [
        {
          // test 指定的是规则生效的文件，对谁进行编译
          test: /\.ts$/,
          // 要使用的loader， 使用loader对ts文件进行编译
          use: [
            // 配置babel
            {
              // 指定加载器
              loader: "babel-loader",
              // 设置badel
              options: {
                // 设置预定义环境
                presets: [
                  [
                    // 指定环境插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      "chrome": "85",
                      "ie": "11"
                    },
                    // 指定corejs版本
                    "corejs": "3",
                    // 使用corejs的方式，usage 表按需加载
                    "useBuiltIns": "usage"
                  }
                  ]
                ]
              }
            },
            'ts-loader'
          ],
          // 要排除的文件
          exclude: /node-modules/
        }
      ]
        },

关闭打包自动生成的箭头函数，ie不兼容
// webpack.config.js 中配置
output: {
        // path:"./dist"
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件
                filename: "bundle.js",
        // 告诉webpack不使用箭头函数,ie不能识别箭头函数
        environment: {
          arrowFunction: false
        }
    },