关于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]
}
}
这篇关于关于webpack 生成文件目录的问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文