TypeSciprt webpack配置

初始化

初始化项目

npm init -y
安装依赖

npm install ... --save-dev
依赖包列表

名称	作用
webpack	构建工具webpack
webpack-cli	webpack命令行工具
webpack-dev-server	webpack开发服务器
typescript	ts编译器
ts-loader	ts加载器，在webpack中编译ts文件
html-webpack-plugin	webpack中html插件，用来自动创建html文件
clean-webpack-plugin	webpack中的清除插件，每次构建都会先清除目录
@babel/core	babel核心工具
@babel/preset-env	babel预定义环境
babel-loader	babel加载器，编译js文件用
core-js	使老版本浏览器兼容新版ES语法

配置

项目根目录创建webapack.config.js & tsconfig.jsoon

1.webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {

    // 入口文件

    entry: './src/index.ts',

    // 打包输出目录

    output: {

        // 指定目录

        path: path.resolve(__dirname, 'dist'),

        // 输出文件

        filename: 'bundle.js',

        environment: {

            arrowFunction: false // 关闭webpack的箭头函数，可选

        }

    },

    // 指定webpack打包时要使用的模块

    module: {

        // 加载规则

        rules: [

            {

                // 指定规则生效的文件

                test: /\.ts$/,

                // loader

                use: [

                    {

                        loader: 'babel-loader',

                        options: {

                            // 设置预定义环境

                            presets: [

                                [

                                    '@babel/preset-env',    // 指定环境的插件

                                    // 配置信息

                                    {

                                        // 兼容的浏览器目标版本

                                        targets: {

                                            'chrome': '58',

                                            'ie': '11'

                                        },

                                        // 指定core.js版本

                                        'corejs': '3',

                                        // 使用corejs方式 'usage':按需加载

                                        'useBuiltIns': 'usage'

                                    }

                                ]

                            ]

                        }

                    },

                    {

                        loader: 'ts-loader'

                    }

                ],

                // 要排除的文件

                exclude: /node_modules/

            }

        ]

    },

    // 设置引用模块

    resolve: {

        extensions: ['.ts', '.js']

    },

    // 插件

    plugins: [

        new CleanWebpackPlugin(),

        new HtmlWebpackPlugin({

            template: './src/index.html'

        })

    ]

}

2.tsconfig.json

{

    "compilerOptions": {

        "target": "es6",

        "module": "es6"

    }

}

3.package.json

{

   "scripts": {

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

       "build": "webpack",

       "start": "webpack serve"

   }

}

使用

启动开发环境： npm run start
编译打包： npm run build

巴特西

TypeSciprt webpack配置

初始化

配置

1.webpack.config.js

2.tsconfig.json

3.package.json

使用

最新文章

热门文章