Webpack 打包Typescript , CSS, SVG 的配置

1. 创建一个typescript project

npx create-react-app hook-ts-demo --template typescript

2. Install webpack

npm install --save-dev webpack

npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin

3.install ts loader 为了将typescript 转为js

npm install ts-loader --save-dev

4.install css loader 为了打包css

npm install css-loader --save-dev

5. install svg loqder 为了打包SVG

npm install svg-url-loader --save-dev

Webpack sample setting:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        entry: './src/index.tsx',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'test.dev.js'
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-url-loader',
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
            /*{
                test: /\.svg$/,
                loader: 'svg-sprite-loader'
            }
            */

        ]
    },

    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        })
    ]
};