What is the current behavior?
When trying to run my webpack configuration, getting the following error in the console:
configuration.output.filename: A relative path is expected. However the provided value "/js/[name].js" is an absolute path! Please use output.path to specify absolute path and output.filename for the file name.
If the current behavior is a bug, please provide the steps to reproduce.
This is my webpack configuration:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const BowerResolvePlugin = require('bower-resolve-webpack-plugin');
const sourcePath = __dirname + '/resources/assets';
const destinationPath = __dirname + '/public/dist';
const bowerPackagesPath = __dirname + '/bower_components';
const nodePackagesPath = __dirname + '/node_modules';
// detect if webpack bundle is being processed in a production or development env
var isDevelopmentMode = !(require('yargs').argv.p || false);
module.exports = {
context: sourcePath + '/js/app',
entry: {
front: sourcePath + '/front.entry',
admin: sourcePath + '/admin.entry'
},
output: {
path: destinationPath,
filename: '/js/[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
}),
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!less-loader'
}),
},
{
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
}),
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
query: {
name: '/images/[name].[ext]'
}
},
{
test: /\.(ttf|eot|svg|woff(2)?)(\?v=[0-9]\.[0-9]\.[0-9])?(\?[a-z0-9]+)?$/,
loader: 'file-loader',
query: {
name: '/fonts/[name].[ext]'
}
},
{
test: /\.jsx$/,
loader: 'babel',
include: [],
query: {
cacheDirectory: true, //important for performance
plugins: ['transform-regenerator'],
presets: ['react', 'es2015', 'stage-0']
}
},
/**
* expose jQuery to a global namespace
*/
{
test: /jquery\.js$/,
use: [
{
loader: 'expose-loader',
query: 'jQuery'
},
{
loader: 'expose-loader',
query: '$'
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
__DEBUG__: JSON.stringify(isDevelopmentMode)
}),
new ProgressBarPlugin(),
new ExtractTextPlugin('/css/[name].css'),
new CopyWebpackPlugin([
{ from: sourcePath + '/images', to: '/images', toType: 'dir', force: true }
]),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: '/js/common.js'
})
],
resolve: {
plugins: [
new BowerResolvePlugin()
],
modules: [
sourcePath + '/js',
sourcePath + '/js/vendor',
bowerPackagesPath,
nodePackagesPath
],
descriptionFiles: ['bower.json', 'package.json'],
mainFields: ['main'],
alias: {
app: sourcePath + '/js/app',
system: sourcePath + '/js/system',
components: sourcePath + '/js/system/components',
plugins: sourcePath + '/js/system/plugins',
utils: sourcePath + '/js/system/utils',
style: sourcePath + '/css',
'__bower': bowerPackagesPath,
'__node' : nodePackagesPath
}
},
cache: true
}
What is the expected behavior?
Specified configuration was working correctly in webpack v2.2.1 . Once the output.filename attribute is being changed to relative path, the generated files structure looks like:
Originally admin.js, extension.js and front.js files were placed in the js directory (using webpack v2.2.1).
documentation source: Note this option is called filename but you are still allowed to something like "js/[name]/bundle.js" to create a folder structure.
I am not sure why feature of create a folder structure was dropped and relative name for output.filename is being forced in webpack v2.3 . Please re-consider to bring the feature back or add an additional parameter where we could specify an additional subdirectory for output js files only because output.path alone is being used by other plugins while resolving output paths for css, fonts, etc…
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System. node v6.2.2, webpack v2.3.2
well
filename: '/js/[name].js'is an absolute path, make itjs/[name].js'and all should be fine@timse thank you! My bad, looks like I was using this incorrectly.