使用Webpack 4打包项目：详细教程教你如何将Git仓库作为npm依赖库，同时支持CSS、Stylus、Sass、Less和图片文件的打包配置

背景

写 客户端多分身本地数据交替升级解决方案 - 绝对干货全网难找-CSDN博客 发现需要不同的代码库依赖同一个 github 升级库，这样就能保证主线版本的升级，大家都在一个分支上，并且也方便查看升级代码，比较升级代码，也方便主线代码的升级过程，非常 Nice，为此，这里特意进行一个 Demo 实现。

步骤一

创建一个 github 代码仓库 my-library，抛出代码需要的函数库

遇到的问题

github 仓库无法访问，需要进行设置，这样就能很快提取代码了，如果不行，可以使用 gitee.com 也一样的，webstorm 2023 会自动拉起登录 github，获取账号密码以及授权，非常方便

git config --global http.proxy 127.0.0.1:7890
git config --global https.proxy 127.0.0.1:7890

下面这个配置，可以绑定 github 仓库，否则 github 仓库也绑不了

关联 github 远程仓库

点击+号与远程仓库进行关联

以上做好后，就可以提交本地代码到远程了，这样我们的类库就准备好了

创建 webpack demo 项目

创建过程同上面设置，否则依赖库拉不下来

npm install 可以更新代码，只需要在依赖后面加个#master

更新后的代码，单更新这个库，非常方便，这样这个库就可以有自己的版本分支了

npm install git+https://github.com/username/my-library.git#master

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.styl$/,
                use: ['style-loader', 'css-loader', 'stylus-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'public/favicon.ico', to: 'favicon.ico' }
            ]
        })
    ],
    mode: 'development'
};

代码仓库

GitHub - wangsen2020/webpack-github-demo

GitHub - wangsen2020/my-library: test github respository library