配置webpack

  1. 需安装ts-loader和source-map-loader

    ts-loader用于解析ts，source-map-loader用于映射生成的js

  2. 新建webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ///webpack.config.js
    var path = require('path')
    module.exports = {
        entry: './src/index.tsx',
        output: {
            path: path.join(__dirname, 'build'),
            filename: 'bundle.js',
        },
        module: {
            rules: [
                { test: /\.tsx?$/, loader: "ts-loader" },
                { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
            ]
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".json"]
        },
    };
    key 说明
    entry 入口文件
    output “输出”配置
    output.path bundle文件路径
    output.filename bundle文件名
    module “生成”配置
    module.rules “生成”规则
    module.rules.test 被”生成“的文件名（支持正则）
    module.rules.loader 被“生成”时的工具
    module.rules.enforce 多个rules的优先级
    resolve “模块文件”配置
    resolve.extensions 为导入语句添加文件后缀

运行

1
2
3
./node_modules/.bin/webpack
#或
webpack

可写入package.json的build命令

自动编译

安装webpack-dev-server至dev环境

1
./node_modules/.bin/webpack-dev-server --hot --inline --content-base

可写入package.json的watch命令