Блог

Поэтому я создаю приложение TS/React UMD. Стек, который у меня есть, выглядит следующим образом:

• Реагировать
• Машинописный текст
• Веб-пакет
• Вавилон

Теперь я получил работу React/TypeScript, когда следовал этому уроку: https://medium.com/swlh/2020-settings-of-react-typescript-project-with-webpack-and-babel-403c92feaa06

И тогда мне стало ясно, что я не тестировал CSS… в любом случае я следовал этому уроку: https://blog.jakoblind.no/css-modules-webpack/ или этот https://www.robinwieruch.de/webpack-css

И получил CSS для сборки с UMD, но не для использования в разработке.

webpack.config.js

 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path')

var config = {
    entry: './src/index.tsx',
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: path.resolve(__dirname, './dist'),
      inline : false
    },
    module: {
        rules: [
            {
                test: /.(jsx|js|tsx|ts)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /.css$/i,
                // the order of `use` is important!
                use: [
                    MiniCssExtractPlugin.loader, // instead of style-loader
                    "css-loader"
                ],
            },
            {
                test: /.(svg|png|jpg)$/,
                use: 'file-loader'
            }
        ],
    },
    resolve: {
        extensions: ['.jsx', '.js', '.tsx', '.ts', '.css'],
    },
    plugins: [
        new MiniCssExtractPlugin(),
    ],
};
var widgetConfig = Object.assign({}, config, {
    name: 'widget',
    devtool: 'source-map',
    output: {
        filename: "[name].widget.js",
        library: 'WIDGET',
        libraryTarget: 'umd',
        umdNamedDefine: true,
    }
});

module.exports = [widgetConfig];
 

пакет.json

 {
  "name": "widget",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1",
    "dev-widget": "webpack serve --mode development --env development --config-name widget",
    "dev-org": "webpack serve --mode development --env development",
    "build": "webpack --mode production --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@types/react": "^17.0.16",
    "@types/react-dom": "^17.0.9",
    "babel-loader": "^8.2.2",
    "core-js": "^3.16.1",
    "css-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.2.0",
    "regenerator-runtime": "^0.13.9",
    "style-loader": "^3.2.1",
    "typescript": "^4.3.5",
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "react-dom": "^17.0.2"
  }
}
 

But when I run npm run dev-widget I get

 Uncaught Error: Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> h1 {
|     color: #f00;
| }
 

Edit
I also found this: https://tjwgore.com/articles/building-a-react-package-with-webpack/
But I just do not know what I am doing differently.