代码之家  ›  专栏  ›  技术社区  ›  Jannes V

Webpack URL不正确

  •  1
  • Jannes V  · 技术社区  · 9 年前

    我在webpack正确解析URL时遇到了问题。当我在本地节点服务器上运行时(因为它很方便),它就像一个魅力,但当我将它上传到我的服务器时,一旦我将它放在子文件夹中,它就会停止工作( http://hostname.com/folder )如果我把它放在根部,那就好了。

    我通过JS加载的图像需要中断。它们放在我项目根目录下的“资产”文件夹中。但它在服务器的根目录中搜索。

    Webpack配置:

    var webpack = require('webpack');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var path = require('path');
    
    var config = require('./_config'); //paths config..
    
    module.exports = {
        entry: [
            config.build('js', 'src'), //JavaScript entry point
            config.build('css', 'src'), //CSS entry point
        output: {
            path: config.js.dest.path,
            filename: config.js.dest.file //JavaScript end point
        }, //quickest, webpack -d -p for production
        devtool: 'eval',
        module: {
            //test: which filetype?,
            //exclude: which folders to exclude
            loaders: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                  babelrc: path.join(__dirname, '.babelrc')
                }
            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint'
            }, {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!postcss!sass?outputStyle=expanded')
            }, {
                test: /\.json$/,
                loader: 'file?hash=sha512&digest=hex&name=../assets/[hash].[ext]'
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=../assets/[hash].[ext]',
                    'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
                ]
            }]
        }, postcss: function(){
            return [
                require('postcss-will-change'),
                require('postcss-cssnext')({
                    browsers: ['IE >= 10', 'last 2 version'],
                    features: {
                        autoprefixer: {
                            cascase: false
                        }
                    }
                })
            ]
        }, //webpack plugins
        plugins: [
            new webpack.optimize.DedupePlugin(),
            //extract CSS into seperate file
            new ExtractTextPlugin(
                config.build('css', 'dest')
            )
        ], eslint: {
            configFile: path.join(__dirname, '.eslintrc'),
            ignorePath: path.join(__dirname, '.eslintignore')
        }, resolve: {
            extensions: ['', '.json', '.js', '.css'],
            fallback: path.join(__dirname, 'node_modules')
        }, resolveLoader: {
            fallback: path.join(__dirname, 'node_modules')
        }
    };
    

    提前谢谢!

    1 回复  |  直到 9 年前
        1
  •  0
  •   Juho Vepsäläinen    9 年前

    设置 publicPath 指向资产目录。例子:

    output: {
      path: config.js.dest.path,
      filename: config.js.dest.file,
      publicPath: 'assets'
    }
    

    此外,您需要像这样调整加载器定义:

    loader: 'file?hash=sha512&digest=hex&name=./assets/[hash].[ext]'
    

    做了这些调整后,您的应用程序为我运行,没有任何错误。