Question

我需要将js，images，fonts，css输出到不同的目录。相应地配置Webpack并将文件放在分发目录中的正确目录中：

/dist
/dist/images
/dist/css
/dist/js
/dist/fonts

我还必须提取css文件，因此我注意到用于将字体和图像放入正确目录的文件加载器选项不会生成正确的URL，因此文件无法在Web浏览器中加载。

http://foobar.com/assets/css/main.css
http://foobar.com/assets/css/assets/images/foobar.png

如果预料到，

http://foobar.com/assets/images/foobar.png

webpack配置文件如下：

var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './src/js/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'assets/js/bundle-[hash].js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=fonts' },
            { test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=images/'}
        ]
    },
    plugins: [
        new ExtractTextPlugin("assets/css/[name].css"),
        new HtmlWebpackPlugin({
            inject: true,
            template: __dirname + '/src/' + 'index.html',
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'PORT_NODE_SERVER': config.port.node_server_prod_port
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            compress: {
                warnings: false, // Suppress uglification warnings
                pure_getters: true,
                unsafe: true,
                unsafe_comps: true,
                screw_ie8: true
            },
            output: {
                comments: false,
            },
            exclude: [/\.min\.js$/gi] // skip pre-minified libs
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
};

Answer 1

我找到了解决方案。似乎webpack v1需要一个关于能够解决这个问题的基本路径的提示，因此需要完整的基本路径，如下所示：

var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './src/js/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'js/bundle-[hash].js',
        publicPath: '/myapp/assets'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=/fonts/[name].[ext]' },
            { test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=/images/[name].[ext]'}
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash].min.css"),
        new HtmlWebpackPlugin({
            inject: true,
            template: __dirname + '/src/' + 'index.html',
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'PORT_NODE_SERVER': config.port.node_server_prod_port
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            compress: {
                warnings: false, // Suppress uglification warnings
                pure_getters: true,
                unsafe: true,
                unsafe_comps: true,
                screw_ie8: true
            },
            output: {
                comments: false,
            },
            exclude: [/\.min\.js$/gi] // skip pre-minified libs
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
};

关于/myapp在http://foobar.com/myapp然后http://foobar.com/myapp/assets/js/bundle-438348934.js以及http://foobar.com/myapp/assets/fonts/myfont.woff

希望这有帮助！

webpack 1文件加载器相对文件路径

1 个答案: