Webpack 网址不正确

Question

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

我通过 require break 在 JS 中加载的图像。它们位于我项目根目录中的 'assets' 文件夹中。但是它在服务器的根目录中搜索。

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')
    }
};

提前致谢！

Answer 1

设置 publicPath 指向您的资产目录。示例：

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

此外，您需要像这样调整加载程序定义：

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

进行这些调整后，您的应用程序可以正常运行。

Webpack 网址不正确

Webpack urls not correct

javascript

build-tools

node.js

webpack