zoukankan      html  css  js  c++  java
  • Webpack + Typescript打包

    安装npm

    创建项目

    npm init -y
    

    安装typescript

    # ts-loader为webpack loader,clean-webpack-plugin copy-webpack-plugin为webpack插件
    npm install --save-dev typescript ts-loader clean-webpack-plugin copy-webpack-plugin
    

    配置tsconfig.json

    {
      "compilerOptions": {
        "outDir": "./build/",
         /* 开启source map,利于调试 */
        "sourceMap": true,
        "module": "commonjs",
        "noImplicitAny": true,
        "target": "es5",
        "allowJs": true
      }
    }
    

    安装webpack

    npm install webpack webpack-cli --save-dev
    

    配置webpack.config.js

    const path = require('path');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    
    module.exports = {
      // 配置多个入口
      entry: {
        BaseInfo: './ts/src/BaseInfo.ts',
        RandomData: '/ts/src/RandomData.ts'
      },
      // 配置source-map,方便调试
      devtool: 'inline-source-map',
      module: {
        rules: [
          {
            // 正则:查出所有ts、tsx结尾的文件
            test: /.tsx?$/,
            // 配置ts-loader
            use: 'ts-loader',
            // 正则:过滤node_modules
            exclude: /node_modules/
          }
        ]
      },
      plugins: [
        // clean-webpack-plugin插件,用于每次打包都清理旧的数据
        new CleanWebpackPlugin(),
        // copy-webpack-plugin,把指定的文件夹内容复制到指定目录
        new CopyWebpackPlugin({
          patterns: [
            {
              from: path.resolve(__dirname, 'html'),
              to: path.resolve(__dirname, 'build')
            },
          ],
        }),
      ],
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      },
      // 指定出口
      output: {
        filename: '[name]-bundle.js',
        path: path.resolve(__dirname, 'build')
      }
    };
    
  • 相关阅读:
    MongoDB入门
    MongoDB基础命令
    MongoDB查询
    MongoDB索引
    MongoDB聚合
    MongoDB进阶
    Elasticsearch简介与安装
    ElasticSearch索引
    shiro xml标准配置
    shiro双realm验证
  • 原文地址:https://www.cnblogs.com/testopsfeng/p/13973453.html
Copyright © 2011-2022 走看看