项目目录

image

1.初始化项目

npm init

2.安装需要的模块

npm install webpack webpack-cli typescript ts-loader --save-dev

3.添加typescript配置文件tsconfig.json

tsc --init

4.创建html文件并添加入口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/main.ts"></script>
</body>
</html>

5.添加webpack配置文件

添加webpack.config.js文件

const path = require('path');
module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.ts$/,
            use: "ts-loader"
        }]
    },
    resolve: {
        extensions: [
            '.ts'
        ]
    }
};

同时在package.json文件中添加

...
"scripts": {
    "build": "webpack",   //添加这一行，打包命令
    "test": "echo \"Error: no test specified\" && exit 1"
}
...

在控制台使用npm run build打包即可。

最后编辑于：2020.09.14 23:54:27

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

webpack+typescript搭建项目