Skip to main content

配置 webpack 编译

目标

通过 webpack 编译多个 tsx 文件，生成单一的 js。

安装 webpack​

项目根目录下执行：

npm i @types/webpack webpack webpack-cli -D

创建 webpack 配置文件​

根目录下新建脚本目录：scripts，然后新建 webpack.config.js 文件：

scripts/webpack.config.js
const path = require('path');
const resolve = (dir) => path.join(__dirname, '..', dir);

/**
 * @return {import('webpack').Configuration}
 */
const createConfig = () => {
    return {
        mode: 'development',
        entry: resolve('tsc_outputs/src/screen/membership/pages/index/index.js'),
        output: {
            path: resolve('dist'),
            filename: 'index.js',
            clean: true,
        },
    };
};

module.exports = createConfig;

编译 tsx 我们使用 tsc，而不是 ts-loader，因为 tsc 会有一些 ts-loader 没有的新特性。webpack 只需要打包 tsc 生成后的 js 文件就行了。

tip
  1. mode 可以是 development 或 production，主要影响process.env.NODE_ENV的值。
  2. entry 表示 webpack 要开始编译的入口，webpack 会分析这个入口文件的依赖，并将所有引用到的文件打包成一个 js。
  3. output 里配置了要输出的路径和最终打包后单一 js 文件的名称。一般习惯叫这个单一的 js 文件为 bundle。
  4. clean 表示每次在打包前，先清空输出目录。这里会在编译前清空dist目录。

修改编译脚本​

打开 package.json，修改 scripts 下的 dev 脚本：

package.json#scripts
"scripts": {
    "tsc": "rm -rf tsc_outputs && tsc",
    "dev": "npm run tsc && webpack build -c scripts/webpack.config.js",
    "build": "",
    "test": "echo 'no test'"
},

编译一下试试​

npm run dev

就可以看到在根目录下生成了一个 dist 目录，里面有一个 index.js 文件。