美文网首页
学习typescript之配置安装webpack

学习typescript之配置安装webpack

作者: passenger_z | 来源:发表于2020-03-16 17:27 被阅读0次

    首先创建一个文件夹learnTs,之后进入这个文件夹,然后与npm init·配置好后,
    运行cnpm install typescript tslint,之后运行npx tsc --init初始化配置文件,
    之后安装webpack cnpm install -D webpack webpack-cli webpack-dev-server
    cnpm install -D ts-loader cnpm install -D clean-webpack-plugin html-webpack-plugin之后新建一个webpack.config.js

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin')
    module.exports = {
        entry:"./src/index.ts",
        module:{
            rules:[
                {
                    test:/\.ts$/,
                    use:'ts-loader',
                    exclude:/node_modules/
                }
            ]
        },
        devtool:'inline-source-map',
        output:{
            filename:"main.js",
    
        },
        devServer:{
            contentBase:'./dist'
        },
        plugins:[
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: './index.html'
            })
        ]
    }
    

    package.json写入

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
      },
    

    src下创建一个index.ts文件

    let a:number = 123
    console.log(a)
    

    npm run dev运行成功

    相关文章

      网友评论

          本文标题:学习typescript之配置安装webpack

          本文链接:https://www.haomeiwen.com/subject/icknehtx.html