鍍金池/ 問答/HTML/ webpack構(gòu)建引用的依賴全部是絕對路徑,麻煩大牛幫忙看下

webpack構(gòu)建引用的依賴全部是絕對路徑,麻煩大牛幫忙看下

webpack打包本地開發(fā)時(shí),沒有發(fā)現(xiàn)什么問題。項(xiàng)目要部署時(shí),打包編譯很開心的交付給了后端人員。
但是,出現(xiàn)了一個(gè)意想不到的情況,所有從node_modules中引用的依賴全部變成了絕對路徑,而開發(fā)模式下沒有這個(gè)問題,打開編譯后的js文件,發(fā)現(xiàn)路徑都是如下:

clipboard.png
而我,想了很久也不知道問題出在哪里,把webpack的配置貼下面了,麻煩各位幫忙看下,不勝感激~

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'); //提取樣式文件外鏈,而非內(nèi)嵌
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: '/' //用以處理build時(shí)把圖片打包到指定文件夾static里,同時(shí)會使得編譯體積變大
                        }
                    }
                ],
                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: {  //減少構(gòu)建搜索或編譯路徑
        extensions: [".js", ".json", ".jsx", "css"],
        modules: ["node_modules"]
    },

    plugins: [

        // 提取樣式文件
        new ExtractTextPlugin({
            filename: "build.css",
            disable: false,
            allChunks: true
        }),

        //分離js、css hash
        // new WebpackMd5Hash(),//樣式修改避免引起發(fā)生變化,極大增加編譯速度,經(jīng)測試修改js增量編譯該插件效果不大

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

        //加速webpack 多線程處理 
        new HappyPack({
            // 用唯一的標(biāo)識符 id 來代表當(dāng)前的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;

我在想是不是我的dll.config出了問題,導(dǎo)致我所有的依賴全部變成D://GSR/src/node_modules/**,不知道各位有沒有遇到過這種問題

回答
編輯回答
離觴

你查下 webpack 配置里的 output.publicPath 選項(xiàng)的用法,或許會有幫助

2018年9月22日 17:14
編輯回答
礙你眼

你的打包在本地進(jìn)行,現(xiàn)在的配置各種文件的路徑相應(yīng)的其實(shí)就被設(shè)置為了本地的路徑,在服務(wù)器上當(dāng)然會報(bào)404。設(shè)置publicPath即可,可參考 https://webpack.js.org/config...

2017年2月26日 07:32
編輯回答
陪她鬧

自己配置的webpack?

2018年2月4日 15:59
編輯回答
雨蝶

問題在于構(gòu)建時(shí)該把入口文件中的react-hot -lodaer去掉

2018年2月3日 01:45