11.23 ts中webpack的简单配置

entry

配置入口文件的位置

"entry":"./src/index.ts"

output

配置输出文件

"output": {
  path:path.resolve(__dirname,"dist"),
  filename: "bundle.js",
  environment: { //输出文件中没有箭头函数（主要是为了兼容ie浏览器）
      arrowFunction:false
  }
}

mode

设置项目的运行环境，一般有 development和production

mode: "development"

module

指定webapck打包时用到的模块

module: {
   //指定要加载的规则
   rules:[
    {
      "test": /\.ts$/,
      "use":[{ //配置babel
         loader: "babel-loader",
         options: {
            //设置预定义的环境
            presets:[
               [
                  //指定环境插件
                  "@babel/preset-env",
                  //配置信息
                  {
                     //要兼容的浏览器
                     targets: {
                         "chrome": "88",
                         "ie":"11"
                     },
                     //指定corejs的版本
                     "corejs":"3",
                     "useBuiltIns":"usage",//按需加载
                   }

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

plugins

需要用到的一些插件

import {CleanWebpackPlugin} from 'clean-webpack-plugin'
plugins:[
   new CleanWebpackPlugin(),//清空原来的dist中的文件，然后再生成新的文件（默认用新生成的文件覆盖之前的文件）
   new HTMLWebpackPlugin({  //自动生成html文件和引入相关资源
      template: './src/index.html'  //以该路径下得html
      文件为模板，生成html文件
   })  
]

resolve

用来设置引用模块(那些文件可以进行导入和导出)

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

配置文件

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// webpack中所有的配置信息都应该写在moudule.exports中
module.exports = {
    //指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在的目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //打包后文件名
        filename:"bundle.js",
        environment: {  //不使用箭头函数（可以兼容ie浏览器）
            arrowFunction: false
        }
    },
    mode:"development",
    // 指定webpack打包时要用的模块
    module: {
        // 指定要加载的规则
        rules:[
           {
               //test指定的是规则生效的文件    
               "test":/\.ts$/,
               "use":[{ //配置babel
                  loader:"babel-loader",
                  options: {
                    // 设置预定义的环境
                    presets:[
                        [
                            // 指定环境插件
                            "@babel/preset-env",
                            // 配置信息
                            {
                                // 要兼容的浏览器 
                                targets:{
                                    "chrome":"88",
                                    "ie":"11"
                                },
                                // 指定corejs的版本
                                "corejs":"3",
                                "useBuiltIns":"usage", //"useBuiltIns":"usage" 按需加载
                            }
                        ]
                    ]  
                  }
               },"ts-loader"],
               //要排除的文件
               exclude:/node_modules/
               
           }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),  //清空dist原来的文件，然后生成新的文件（默认是生成新的文件然后进行覆盖）
        new HTMLWebpackPlugin({  //自动生成html文件和引入相关的资源
            // title:'ts中webpack的配置',
            template:'./src/index.html'
        }),  
    ],
    // 用来设置引用模块
    resolve: {
        extensions: ['.ts','.js']
    }
}