学习typescript之配置安装webpack

2020-03-16  本文已影响0人  passenger_z

首先创建一个文件夹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运行成功

上一篇下一篇

猜你喜欢

热点阅读