webpack4.0-TypeScript的打包配置-13

安装配置TypeScript ，安装TypeScript对应的第三方库

如lodash： npm i @types/lodash --sace-dev

查看TypeScript支持的第三方库

https://github.com/DefinitelyTyped/DefinitelyTyped

https://microsoft.github.io/TypeSearch/

npm install --save-dev typescript ts-loader

配置TypeScript的 tsconfig.json,更多配置查看官网

{
    "compilerOptions": {
      "outDir": "./dist/", // 打包后文件的位置
      "noImplicitAny": true, 
      "module": "es6",
      "target": "es5",
      "allowJs": true // 是否允许引入js
    }
  }

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') 
module.exports = {
    mode:'production',
    entry: {
        main:'./src/index.tsx'
    },
    output:{
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({template: './src/index.html'}),
        new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*']})
    ],
    module:{
        rules:[
            { // 处理 TypeScript文件
                test:/\.tsx$/,
                use:{
                    loader:'ts-loader'
                },
                exclude:/node_modules/
            }
        ]
    }
}