xiaopy

npm init -y

# react and react-dom are required for writing React components
npm i react react-dom -D

# webpack and webpack-cli are used for webpack configuration
npm i webpack webpack-cli -D

# Install the development server to start a local server in development mode
npm i webpack-dev-server -D

# babel-loader is used to transpile JS files
# @babel/core is the core library for Babel and must be installed
# @babel/preset-env is a preset used to compile advanced JS syntax
npm i babel-loader @babel/core @babel/preset-env -D

# To compile syntax in React
npm i @babel/preset-react -D

# In development mode, we need to view component styles in the HTML template
# It bundles the HTML file and automatically includes CSS styles and JS code
npm i html-webpack-plugin -D

# In production mode, CSS files need to be bundled separately
npm i mini-css-extract-plugin -D

# Minify CSS code
npm i css-minimizer-webpack-plugin -D

# style-loader inserts CSS styles into HTML
# css-loader compiles CSS files imported with import
npm i style-loader css-loader -D

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    module: {
        rules: [
            // Handle CSS
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            },
            // Handle JS and JSX
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // Use index.html as the template for bundling in development mode
            template: path.resolve(__dirname,"public/index.html")
        })
    ],
    // Configure source maps for development mode to facilitate code debugging and bug tracking
    devtool: "cheap-module-source-map",
    // Configure the development server
    devServer: {
        port: 3001,
        open: true
    },
    resolve: {
        // Automatically add file extensions so that they can be omitted when importing
        extensions: [".js",".jsx",".json"]
    },
    // externals is used to define which packages imported with import should not be bundled into the bundle
    // In other words, the react and react-dom imported in the component should not be bundled
    externals: {
        react:{
            root: "React",
            commonjs2: "react",
            commonjs: "react",
            amd: "react",
        },
        "react-dom":{
            root: "ReactDom",
            commonjs2: "react-dom",
            commonjs: "react-dom",
            amd: "react-dom"
        }
    }
}

const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const cssMinimizerPlugin = require("css-minimizer-webpack-plugin");


module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        // Bundle to the lib directory
        path: path.resolve(__dirname,'lib'),
        filename: "index.js",
        // Automatically clean up the existing bundle files each time they are bundled
        clean: true,
        // Publishing information for npm
        // name is the name of the library when published to npm
        // type is the form in which the library is exposed, umd means that the library can be imported in all module definitions
        // such as CommonJs, AMD, and global variables
        // export is used to specify which export should be exposed as a library
        // default is the library we export by default
        library: {
            name: 'xpy-markdown',
            type: 'umd',
            export: 'default'
        },

    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    miniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new miniCssExtractPlugin({
            // Since we import it in the file as publicTest.css
            // Use the same name after bundling to avoid import failure
            filename: 'publicTest.css'
        })
    ],
    resolve: {
        // Support hiding extensions when importing .js .jsx .json files
        extensions: ['.js', '.jsx', '.json']
    },
    // Configuration for compression and optimization is written in optimization
    optimization: {
        minimizer: [
            new cssMinimizerPlugin()
        ]
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react',
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom',
        }
    }
}

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

{
  "name": "xpy-markdown",
  "version": "1.0.0",
  "description": "...",
  "main": "lib/index.js", // Module's export file
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --config webpack.dev.js", // Start in development mode with npm start
    "build": "webpack --config webpack.prod.js", // Start in production mode, bundle the project with npm run build
    "pub": "npm run build && npm publish" // After logging in to npm, running npm run pub will bundle and publish to npm directly
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/guozia007/pulish-react-test01.git"
  },
  "keywords": [
    "react",
    "react component",
    "practive"
  ],
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },
  "files": [
    "lib"
  ],
  "author": "xiaopy",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
  },
  "browserslist": [
    "> 0.25%",
    "last 2 versions",
    "not dead"
  ]
}

node_modules
.DS_Store
*.log