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