Webpack packs TypeScript code

webpack

npm init -v  

Project initialization will generate pageage.json
installation dependencies

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

webpack-cli is a command-line tool for webpack, and ts-loader integrates typescript and webpack

Create a new webpack.config.js file

To compile the ts file, you also need to create a new tsconfig.json to specify the ts compilation specification

pageage.json add bulid command packaging:

"scripts":{
    
    
    "build":"webpack"
}

The webpack plugin helps to automatically generate html files

npm i -D html-webpack-plugin 

Install hot updates, code changes automatically refresh the browser

npm i -D webpack-dev-server

pageage.json configures the startup command and opens the chrome browser

"scripts":{
    
    
    "start":"webpack serve --open chrome.exe"
}

Clear the previously packaged dist file and package the new one

npm i -D clean-webpack-plugin

compatibility

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

It is mainly the configuration of the webpack.config.js file, which can be referred to as follows

const path = require("path");// node.js 里的模块,主要用于帮助我们拼接路径
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入clean插件 ,
const {
    
    CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports={
    
     // webpack 中所有的配置信息
    // 指定入口文件
    entry:"./src/index.ts",
    //打包文件所在目录 与文件名
    output:{
    
    
        path:path.resolve(_dirname,"dist"),
        filename:"bundle.js",
        environment:{
    
     // 告诉webpack 不使用箭头函数
            arrowFunction:false  
        }
    },
    //指定webpack打包时要使用模块
    module:{
    
    
        //指定要加载的规则
        rules:[
            {
    
    
                test:/\.ts$/,  //test 指定的是规则生效的文件 这里是匹配所有.ts结尾的文件
                use:[ //要使用的loader
                    {
    
     // 配置babel
                        loader:"babel-loader", //指定加载器
                        //设置babel
                        option:{
    
    
                            presets:[ // 设置预定义的环境
                                [ 
                                    "@babel/preset-env", //指定环境的插件
                                    //配置信息
                                    {
    
     
                                        targets:{
    
     //要兼容的目标浏览器
                                            "chrome":"58",
                                            "ie":"11"
                                        }, 
                                        "corejs":"3", // 指定corejs的版本
                                        "useBuiltIns":"usage", // 使用corejs的方式"usage"表示按需加载 
                                    }
                                ]

                            ]
                        }
                    },
                    'ts-loader' //加载器执行顺序是从后往前执行

                ],
                exclude:/node-modules/ //要排除的文件
            }
        ]
    },
    //配置webpack插件
    plugins:[
        new HTMLWebpackPlugin(), // 打包后自动生成html文件,并自动引入js文件
        new CleanWebpackPlugin(), // 将之前打包的dist文件清空,在打包新的
    ],
    //用来设置引用模块
    resolve:{
    
    
        extensions:['.ts','.js'], //项目中可以引用ts和js文件
    }
}

Guess you like

Origin blog.csdn.net/weixin_43506403/article/details/127857077