xiaopy

npm init -y

# react react-dom在寫react組件時需要引用
npm i react react-dom -D

# webpack webpack-cli做webpack配置時使用
npm i webpack webpack-cli -D

# 安裝開發伺服器，在開發模式下啟動本地服務
npm i webpack-dev-server -D

# babel-loader用於轉譯js文件 
# @babel/core是babel的核心庫，必須安裝
# @babel-preset-env是一個只能預設，用於編譯js高級語法
npm i babel-loader @babel/core @babel/preset-env -D

# 為了編譯react中的語法
npm i @babel/preset-react -D

# 開發模式下，我們需要在html模板裡查看組件樣式
# 它會把html文件打包，自動引入css樣式和js代碼
npm i html-webpack-plugin -D

# 生產模式下，需要把css文件獨立打包
npm i mini-css-extract-plugin -D

# 壓縮css代碼
npm i css-minimizer-webpack-plugin -D

# style-loader會把css樣式插入到html中
# css-loader會把import引入的css文件編譯成css代碼
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: [
            // 處理css
            {
                test: /\.css$/,
                use:["style-loader","css-loader"]
            },
            // 處理js和jsx
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // 開發模式下打包html時，以index.html為模板
            template: path.resolve(__dirname,"public/index.html")
        })
    ],
    // 配置開發模式的source-map，便於調試代碼，定位bug
    devtool: "cheap-module-source-map",
    // 配置開發伺服器
    devServer: {
        port: 3001,
        open: true
    },
    resolve: {
        // 自動補充擴展名，引入時就可以省略文件後綴
        extensions: [".js",".jsx",".json"]
    },
    // externals 用來定義哪些通過import引入的包不要被打包到boundle中
    // 也就是說，我們在寫組件時引入的react和react-dom，不要打包
    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: {
        // 打包到lib目錄下
        path: path.resolve(__dirname,'lib'),
        filename: "index.js",
        // 每次打包時，都自動清除原有的打包文件
        clean: true,
        // 發布到npm庫的相關信息
        // name是發布到npm時的庫名，別人安裝就是安裝它
        // type是暴露庫的形式，umd就表示別人可以在所有模塊定義下引入這個庫
        // 比如CommonJs AMD 和全局變量的形式
        // export用來指定哪一個導出應該被暴露為一個庫
        // 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({
            // 因為我們在文件中引入就是publicTest.css
            // 所以在打包後，也用這個名字，以免引入失敗
            filename: 'publicTest.css'
        })
    ],
    resolve: {
        // 支持.js .jsx .json文件引入時隱藏後綴
        extensions: ['.js', '.jsx', '.json']
    },
    // 壓縮和優化的相關配置都寫在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", // 模塊的出口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --config webpack.dev.js", // 開發模式下啟動 npm start
    "build": "webpack --config webpack.prod.js", // 生產模式下啟動，打包項目 npm run build
    "pub": "npm run build && npm publish" // 在已經登錄npm後，執行npm run pub就會直接打包並發布到npm
  },
  "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