TypeScript学习笔记-05webpack打包

标签：npm 文件 TypeScript 05webpack ts module webpack 打包

1.使用命令npm init -y生成项目package.json,这个文件是项目的基本信息，方便我们对项目进行管理，如图所示。

2.使用命令 npm i -D webpack webpack-cli typescript ts-loader下载这4个依赖包，安装完成效果如下

3.创建webpack.config.json文件，如图所示。

// 引入一个包
const path = require('path');

// webpack中的所有的配置信息都应该写在module.exports 中
module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        //指定打包后的文件的目录
        path: path.resolve(__dirname, "dist"),
        //打保后的文件名
        filename: "bundle.js"
    },

    // 指定webpack打包时要使用模块
    module: {
        //指定加载的规则
        rules: [
            {
                // test:指定规则生效的文件,这里是正则匹配以.ts结尾的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    }

}

4.编写tsconfig.json配置文件。

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        "strict": true
    }
}

5.修改package.，加上一个命令build。注意：这里我没有加上 --mode development,所以下面会报警告，但是不影响打包功能。

    "dev": "webpack --mode development",     "build": "webpack --mode production" 吐槽：可以按照这样加，对应的打包命令也跟着变化就行，npm run dev和 npm run build。

测试：执行命令 npm run build 就可以打包项目了，打包后的位置如图所示dist目录下，如图所示。

 

标签：npm,文件,TypeScript,05webpack,ts,module,webpack,打包
From： https://www.cnblogs.com/hg-blogs/p/16927658.html