自己搭建的vue webpack打包后的路径问题？

Question

这是目前打包后的结构：

webpack 配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = env => {
    if (!env) {
        env = {}
    }
    let plugins = [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './app/views/index.html',
            favicon: './app/images/favicon.ico'
        }),
        new CleanWebpackPlugin(['dist']),
    ];
    if(env.production){
        plugins.push(
          new webpack.DefinePlugin({
            'process.env': {
              NODE_ENV: '"production"'
            }
          }),
          new ExtractTextPlugin("css/[name].css"),
          new UglifyJsPlugin()
        )
      }
    return {
        entry: ['./app/js/viewport.js', './app/js/main.js'],

        devServer: {
            contentBase: path.join(__dirname, "dist"),
            compress: true,
            port: 9000
        },

        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "babel-loader"
                }, {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'images/[name].[ext]'
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        cssModules: {
                            localIdentName: '[path][name]---[local]---[hash:base64:5]',
                            camelCase: true
                        },
                        extractCSS: true,
                        loaders: env.production?{
                            css: ExtractTextPlugin.extract({
                                use: 'css-loader!px2rem-loader?remUnit=46.875&remPrecision=8',
                                fallback: 'vue-style-loader'
                            }),
                            scss: ExtractTextPlugin.extract({
                                use: 'css-loader!px2rem-loader?remUnit=46.875&remPrecision=8!sass-loader',
                                fallback: 'vue-style-loader'
                            })
                        }:{
                            css:'vue-style-loader!css-loader!px2rem-loader?remUnit=46.875&remPrecision=8',
                            sass:'vue-style-loader!css-loader!px2rem-loader?remUnit=46.875&remPrecision=8!sass-loader'
                        }
                    }
                }, {
                    test: /\.css$/,
                    use: ["style-loader", "css-loader", "postcss-loader"]
                }, {
                    test: /\.scss$/,
                    use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"]
                }, {
                    test: /\.html$/,
                    use: ['html-loader']
                }, {
                    test: /\.(eot|svg|ttf|woff|woff2)$/,
                    use: ['url-loader']
                }
            ],
        },
        plugins: plugins,

        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].js'
        },
    }
}

想要的目录结构：

Answer 1

在url-loader中设置一下namename: '[path][name].[ext]'