webpack打包ts

最新推荐文章于 2024-08-04 17:19:03 发布

云＆雨

最新推荐文章于 2024-08-04 17:19:03 发布

阅读量117

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/allloners/article/details/124889283

版权

本文详细介绍了一篇关于使用Webpack构建项目时的配置，涉及CSS和TypeScript的处理，以及tsconfig.json和webpack.config.json的详细内容。重点讲解了如何整合模块加载、打包和HTML模板生成。

摘要由CSDN通过智能技术生成

目录结构

project
|__build
|__node_modules
|__src
|    | index.html
|    |
|    |__css
|         |    a.css
|         |    b.css
|    |__ts
|         |main.ts
|
|    package-lock.json
|    package.json
|    tsconfig.json
|    webpack.config.json

webpack整体配置

//webpack.config.json
const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
const {CleanWebpackPlugin}=require("clean-webpack-plugin")
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
module.exports={
    entry:"./src/ts/main.ts",
    output:{
        filename:"js/built.js",
        path:path.resolve(__dirname,"build")
    },
    module:{
        rules:[
            {
                test:/\.css/,
                use:[
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test:/\.js/,
                exclude:/node_modules/,
                loader:"babel-loader",
                options:{
                    presets:[
                        [
                            "@babel/preset-env",
                            {
                                useBuiltIns:"usage",
                                corejs:{
                                    version:3
                                }
                            }
                        ]
                    ]
                }
            },
            {
                test:/\.ts/,
                exclude:/node_modules/,
                loader:"ts-loader"
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename:"css/built.css"
        })
    ],
    resolve:{
        extensions:[".ts",".tsx",".js"]
    },
    mode:"development",
    devServer:{
        static:{
            directory:path.resolve(__dirname,"src")
        },
        compress:true,
        port:3000,
        open:true
    }
}

下面是ts编译器的选项

//tsconfig.json
{
    "compilerOptions": {
        "module": "es2015",
        "target": "es2015",
        "strict": true,
        "noEmitOnError": true
    }
}