webpack打包typescript

新建一个文件夹，直接把pageage.json和webpack.config.js和tsconfig.json粘进去，npm i安装依赖

使用Webpack打包ts代码

首先在项目目录下执行npm init -y生成package.json

在package.json文件中新增一句

"scripts":{

    "test":"echo \"Error: no test specified\" && exit 1",

    "build":"webpack",

    "start":"webpack serve --open chrome.exe"

 

}

安装使用webpack所需要的的依赖

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

cnpm i -D  html--webpack-plugin

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

cnpm i -D  postcss postcss-loader postcss-preset-env

//每次打包前先把dist目录下的文件删除再重新生成的插件，而不是直接覆盖内容的

cnpm i -D clean-webpack-plugin

编写webpack配置文件

新建一个webpack.config.js

//引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');//自动生成html文件并引入相应的资源
//引入clean插件 
const {CleanWebpackPlugin} = require('clean-weback-plugin');

//webpack所有的配置 信息都应该写在module.exports中
module.exports = {
    //指定入口文件
    entry:"./src/index.ts",
    //指定打包文件所在目录
    output:{
        //指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        //打包后的 文件
        filename:'bundle.js,
        //设置打包之后的立即函数,告诉webpack不使用箭头函数
        environment:{
            arrowFunction:false
        }
    },
    //指定webpack打包时 要使用模块
    module:{
        //指定加载的规则
        rules:[
            {
                //test指定的规则生效的文件
                test:/\.ts$/,
                //要使用 的loader    
                use:[
                    //配置babel
                    {
                        //指定加载器
                        loader:"babel-loader",
                        //设置babel
                        options:{
                            //设置预定义环境
                            presets:[
                                //指定环境插件
                                "@babel/preset-env".
                                //配置信息
                                {
                                    targets:{
                                        "chrome":"87",
                                        "ie":"11"
                                    },
                                    "corejs":"3",//下载的是哪个版本就写哪个版本，在packakge.json中看
                                    //使用corejs的方式,usage表示按需加载
                                    "useBuiltIns":"usage"
                                }
                            ]
                        }
                    },
                    'ts-loader',
                ],
                //要排除的文件
                exclude:/node-modules/
            },
            //设置less文件的处理,loader执行的顺序是自下往上执行的
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    //引入postcss
                    {
                        loader:"postcss-loader",
                        options:{
                            postcssOptions:{
                                plugins:[
                                    "postcss-preset-env",
                                    {
                                        browsers:'last 2 versions'//兼容两个最新版本的浏览器，每种浏览器最新的两个版本
                                    }
                                ]
                            }
                        }
                    }
                    "less-loader",
                ]
            }
        ]
    },
    //配置webpack插件
        plugin:[
            new CleanWebpackPlugin(),
            new HTMLWebpackPlugin({
                title:'这是一个自定义的title，显示在html文件的title标签中'
                //
                template:"./ src/index.html"
            }),
        ],
        //用来设置引用模块
        resolve:{
            extensions:[".ts",".js"]
        }
}

　　在项目根目录下创建一个 tsconfig.json文件

{
    "compilerOptions":{
        "target":"ES2015",
        "module":"ES2015",
        "strict":true,
        "noEmitOnError":true,//有错误的时候不进行编译
    }
}

　　

执行npm run build打包一下看一下dist目录

 

打包之后的js文件会是(()=>{.....})这种样子的箭头函数，这个是立即执行函数，是webpack打包自动生成的，没有经过babel,对IE兼容有影响

设置arrowFunction为 false就打包之后不是(()=>{})这种的了,变成!function(){}普通函数这种了