webpack+react+typescript+sass項目搭建

今天自己嘗試搭建項目框架實現hmr時報了兩個錯
控制檯報錯

Uncaught ReferenceError: React is not defined

控制檯報錯

ERROR in (webpack)/hot/dev-server.js
Module not found: Error: Can't resolve './emitter' in '/Users/lorry/workspace/up/pine_soot/node_modules/webpack/hot'
 @ (webpack)/hot/dev-server.js 50:18-38
 @ multi (webpack)-dev-server/client?http://localhost:9000 (webpack)/hot/dev-server.js ./src/pages/index/index.tsx

ERROR in (webpack)/hot/dev-server.js
Module not found: Error: Can't resolve './log' in '/Users/lorry/workspace/up/pine_soot/node_modules/webpack/hot'
 @ (webpack)/hot/dev-server.js 11:11-27
 @ multi (webpack)-dev-server/client?http://localhost:9000 (webpack)/hot/dev-server.js ./src/pages/index/index.tsx

ERROR in (webpack)/hot/dev-server.js
Module not found: Error: Can't resolve './log-apply-result' in '/Users/lorry/workspace/up/pine_soot/node_modules/webpack/hot'
 @ (webpack)/hot/dev-server.js 30:4-33
 @ multi (webpack)-dev-server/client?http://localhost:9000 (webpack)/hot/dev-server.js ./src/pages/index/index.tsx

ERROR in (webpack)-dev-server/client?http://localhost:9000

最後發現是resolve extensions配置有點問題

const MiniCss = require('mini-css-extract-plugin');
const cleanPlu = require('clean-webpack-plugin').CleanWebpackPlugin;
const htmlPlu = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: "production",
    devtool: "source-map",
    entry: {
        index: './src/pages/index/index.tsx',
    },
    resolve: {
        extensions: [".wasm", ".mjs", ".js", ".jsx", ".ts", ".tsx", ".json"],
        alias: {
            '@': path.resolve('src'),
        }
    },
    devServer: {
        contentBase: './dist',
        compress: true,
        port: 9000,
        hot: true,
        open: true,
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            transpileOnly: true,
                            experimentalWatchApi: true,
                        },
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.(png|jpe?g)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name].[ext]', 
                            outputPath: 'assets/',
                            limit: 39,
                            esModule: false,
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCss.loader,
                        options: {
                            publicPath: '../',
                        }
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                    }
                ]
            },
        ]
    },
    
    plugins: [new MiniCss({
        filename: 'css/[name].css',
    }), new cleanPlu({
        path: './dist'
    }), new htmlPlu({
        title: 'pine_soot',
        filename: './index.html',
        template: 'index.html',
        inject: true,
    })]
}

參考資料

1. https://segmentfault.com/q/1010000005156126
2. https://github.com/webpack/webpack-dev-server/issues/2312
3. https://www.jianshu.com/p/5b9d4c5d0bcf