首页 > 关于webpack 生成文件目录的问题?

关于webpack 生成文件目录的问题?

webpack配置:

output: {
    path: './dist/components',
    publicPath: 'http://***.***.cn/mx/components/',
    //filename: '[name].[chunkhash:8].js',
    filename: '[name].js'
},

生成的文件如:

问题是:我想把生成的图片放到images文件中,生成的js按业务模块分类放到不同的文件夹中.

如何配置? 谢谢!


我自己工程的打包代码,请自行参考。

var path = require('path')
var config = require('../config')
var precss = require('precss')
var autoprefixer = require('autoprefixer')
var projectRoot = path.resolve(__dirname, '../')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    index: ['./src/scripts/vitarem.js', './src/scripts/index.js'],
    index2: ['./src/scripts/vitarem.js', './src/scripts/index2.js'],
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.css', '.scss', '.png', '.jpg'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    preloaders: [
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      }, 
      {
        test: /\.json$/,
        loader: 'json'
      }, 
      {
        test: /\.html$/,
        loader: 'html'
      }, 
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: path.posix.join(config.build.assetsSubDirectory, 'img/[name].[hash:7].[ext]')
        }
      }, 
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: path.posix.join(config.build.assetsSubDirectory, 'fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  postcss: function() {
    return [autoprefixer, precss]
  }
}
【热门文章】
【热门文章】