javascript - 想用webpack把图片整理到指定目录（dist）下，webpack.config.js怎么写？

Question

现在配置文件如下，请问怎么改才能达到目的：用webpack把图片整理到指定目录（dist）下。

var path = require('path');
var webpack = require('webpack');

module.exports = {
    // 入口文件
    entry: './src/main.js',
    output: {
        // 打包后输出的目录
        path: path.resolve(__dirname, './dist'),
        // 打包后资源文件的前缀
        publicPath: '/dist/',
        filename: 'build.js'
    },
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
    },
    // 处理不同后缀的文件
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }]
    },
    // webpack-dev-server配置
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    // 开启source-map，webpack有多种source-map，在官网文档可以查到
    devtool: '#eval-source-map'
}

// 生产环境，运行npm run build则执行这里
if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        // 环境变量
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // 压缩代码
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        })
    ])
}

package.json

{
  "name": "vue-chat",
  "description": "A Vue.js project",
  "author": "coffcer",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "babel-polyfill": "^6.13.0",
    "babel-runtime": "^6.0.0",
    "vue": "^1.0.0",
    "vuex": "^0.8.2",
    "vue-resource": "^1.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

目录结构

Answer 1

npm install copy-webpack-plugin --save

配置文件中

var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    //省略..
    plugins: [
        new CopyWebpackPlugin([
            {
                from: './src/assets',
                to: './dist'
            }
        ])
    ]
}

Answer 2

使用 copy-webpack-plugin 插件

plugins: [
  new CopyWebpackPlugin([
    { from: './assets' }
  ])
]

Answer 3

在name中指定相对路径

{
    test: /\.(png|jpg|gif)$/,
    exclude: /^node_modules$/,
    loader: 'url-loader?limit=1024&name=../images/[hash:8].[name].[ext]'
}