The dependencies of webpack build references are all absolute paths. Please take a look at them.

webpack found no problems when packaging local development. When the project was to be deployed, the package compilation was happily delivered to the back-end staff.
however, there is an unexpected situation in which all dependencies referenced from node_modules have become absolute paths, but there is no such problem in development mode. When you open the compiled js file, you will find that the path is as follows:

clipboard.png
and I, who have been thinking about it for a long time, do not know what the problem is. I have posted the configuration of webpack below. Please take a look at it. I would appreciate it.

webpack.dll.js

var path = require("path");
var webpack = require("webpack");
module.exports = {
    entry: {
        "lib": ["react", "react-dom", "react-router", "antd", "jquery", "echarts", "echarts-for-react"], //key

    },

    output: {
        path: path.join(__dirname, "build"),
        filename: "[name].js",
        library: "[name]"
    },
    plugins: [
        new webpack.DllPlugin({
            path: "manifest.json",
            name: "[name]",
            context: __dirname,
        }),
    ],

};

webpack.config.js

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
// var autoprefixer = require("autoprefixer");
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //
var HappyPack = require("happypack");
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "./components/index.js");
var BUILD_PATH = path.resolve(ROOT_PATH, "build/");

function resolve(dir) {
    return path.join(__dirname, "..", dir)
}

var config = {
    entry: [
        "react-hot-loader/patch",
        APP_PATH,
        ],
    output: {
        path: BUILD_PATH,
        filename: "bundle.js",
        publicPath: "./build/",
        chunkFilename: "js/[id].[chunkhash].js"
    },
    module: {
        rules: [
            {
                test: /\.js(x)*$/,
                use: ["happypack/loader?id=js"], //happypack
              },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },

            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                use: ["url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[hash].[ext]"],
                exclude: function(path) {
                    //  node_modules 
                    return !!path.match("node_modules");
                },
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: ["url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]"],
                exclude: function(path) {
                    //  node_modules 
                    return !!path.match("node_modules");
                },
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: ["url-loader?limit=10000&name=fonts/[hash].[ext]"],
                exclude: function(path) {
                    //  node_modules 
                    return !!path.match("node_modules");
                },
            },
            {
                test: /\.(png|jpg)$/,
                use: [
                    {
                        loader: "url-loader?limit=8192&name=static/[name].[ext]",
                        options: {
                            publicPath: "/" //buildstatic
                        }
                    }
                ],
                exclude: function(path) {
                    //  node_modules 
                    return !!path.match("node_modules");
                },
            },

            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: ["url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[hash].[ext]"],
                exclude: function(path) {
                    //  node_modules 
                    return !!path.match("node_modules");
                },

            }


        ]

    },

    resolve: {  //
        extensions: [".js", ".json", ".jsx", "css"],
        modules: ["node_modules"]
    },

    plugins: [

        // 
        new ExtractTextPlugin({
            filename: "build.css",
            disable: false,
            allChunks: true
        }),

        //jscss hash
        // new WebpackMd5Hash(),//js

        //dll
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: path.resolve(__dirname, "manifest.json"),
        }),

        //webpack  
        new HappyPack({
            //  id HappyPack 
            id: "js",
            loaders: ["babel-loader"],
        }),

        


    ],

};


module.exports = config;

webpack.build.js

var path = require("path");
var webpack = require("webpack");
var config = require("./webpack.config.js");
config.devtool = false;
config.plugins.push(new webpack.DefinePlugin({
    process: { 
        env: {
             NODE_ENV: JSON.stringify("production")
         },
        noDeprecation: true
   }
}));
module.exports = config;

I was wondering if there was something wrong with my dll.config, which caused all my dependencies to become DVU, GSR, and GSR. , I don"t know if you have ever encountered this kind of problem

.
Mar.01,2021

the problem is that the react-hot-lodaer should be removed from the entry file when building


you check the usage of the output.publicPath option in the webpack configuration, it may be helpful


your packaging is carried out locally, and the paths of various files in the current configuration are actually set to local paths, which will of course be reported on the server. You can set publicPath by referring to https://webpack.js.org/config.


self-configured webpack?.

Menu