I try to build js files with '[name].[chunkhash].js' but output files does not include name
this is my output config
webpackConfig.output = {
filename: __DEV__ ? '[name].js' : '[name].[chunkhash].js',
path: paths.dist(),
publicPath: config.compiler_public_path
}
I recently update webpack to v3 and after that i got this problem
Update 1
entry config:
webpackConfig.entry = {
app: __DEV__? APP_ENTRY_PATHS.concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`) : APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}
Update 2
import webpack from 'webpack'
import path from 'path'
const project = require('../project.config')
const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = (file) => inProject(project.srcDir, file)
import PreloadWebpackPlugin from 'preload-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import config from '../config'
import _debug from 'debug'
const debug = _debug('app:webpack:config')
const paths = config.utils_paths
const {__DEV__, __PROD__, __TEST__} = config.globals
debug('Create configuration.')
const webpackConfig = {
name: 'client',
target: 'web',
devtool: project.sourcemaps ? 'source-map' : false,
resolve: {
modules: [
inProject(project.srcDir),
'node_modules',
],
extensions: [ '*','.js', '.jsx', '.json']
},
module: {rules:[]}
}
webpackConfig.node = {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
// ------------------------------------
// Entry Points
// ------------------------------------
const APP_ENTRY_PATHS = [
paths.client('main.js')
]
webpackConfig.entry = {
app: __DEV__
? APP_ENTRY_PATHS.concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
: APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}
// ------------------------------------
// Bundle Output
// ------------------------------------
webpackConfig.output = {
filename: __DEV__ ? '[name].js' : '[name].[chunkhash].js',
path: paths.dist(),
publicPath: config.compiler_public_path
}
// ------------------------------------
// Plugins
// ------------------------------------
webpackConfig.plugins = [
new webpack.DefinePlugin(config.globals),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('../src/static/assets/favicon.ico'),
filename: 'index.html',
inject: 'body',
minify: {
collapseWhitespace: true
}
})
]
if (__DEV__) {
debug('Enable plugins for live development (HMR, NoErrors).')
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin (),
)
} else if (__PROD__) {
debug('Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
webpackConfig.plugins.push(
new webpack.DefinePlugin({ // <-- key to reducing React's size
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(), //dedupe similar code
// new webpack.optimize.AggressiveMergingPlugin(),//Merge chunks
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),//Merge chunks
new PreloadWebpackPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false
}
})
)
}
// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
webpackConfig.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
)
}
// ------------------------------------
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.rules.push({
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: [
'transform-runtime',
'babel-plugin-transform-class-properties',
],
presets: [
'babel-preset-react',
["es2015", {"modules": false}],
'stage-0',
['babel-preset-env', {
modules: false,
targets: {
ie9: true,
},
uglify: true,
}],
]
},
}],
})
// ------------------------------------
// Style Loaders
// ------------------------------------
const extractStyles = new ExtractTextPlugin({
filename: 'styles/[name].[contenthash].css',
allChunks: true,
disable: __DEV__,
})
webpackConfig.module.rules.push({
test: /\.(css)$/,
loader: extractStyles.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: project.sourcemaps,
minimize: {
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions'],
},
discardComments: {
removeAll : true,
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: project.sourcemaps,
},
},
}
]
}
)
},
{
test: /\.(scss|sass)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader',
'sass-loader'
]
})
})
webpackConfig.plugins.push(extractStyles)
// File loaders
/* eslint-disable */
// Images
// ------------------------------------
webpackConfig.module.rules.push({
test : /\.(png|jpg|gif)$/,
loader : 'url-loader',
options : {
limit : 8192,
},
})
// Fonts
// ------------------------------------
;[
['woff', 'application/font-woff'],
['woff2', 'application/font-woff2'],
['otf', 'font/opentype'],
['ttf', 'application/octet-stream'],
['eot', 'application/vnd.ms-fontobject'],
['svg', 'image/svg+xml'],
].forEach((font) => {
const extension = font[0]
const mimetype = font[1]
webpackConfig.module.rules.push({
test : new RegExp(`\\.${extension}$`),
loader : 'url-loader',
options : {
name : 'fonts/[name].[ext]',
limit : 10000,
mimetype,
},
})
})
if (!__DEV__) {
debug('Apply ExtractTextPlugin to CSS loaders.')
webpackConfig.module.rules.filter((loader) =>
loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0]))
).forEach((loader) => {
const [first, ...rest] = loader.loaders
loader.loader = ExtractTextPlugin.extract(first, rest.join('!'))
Reflect.deleteProperty(loader, 'loaders')
})
webpackConfig.plugins.push(
new ExtractTextPlugin('[name].[contenthash].css', {
allChunks: true
})
)
}
export default webpackConfigIt's hard to tell what's wrong in your config file, because there are so many outside variables, and I don't their values.
So, maybe you can take a look at my basic webpack project
https://github.com/littlee/webpack-3-project
update 20180122:
getEntry will translate the array from pages.js to a entry config object
pages.js
module.exports = ['index', 'another', 'and_so_on']
getEntry will return
{
index: './js/index.js',
another: './js/another.js',
and_so_on: './js/and_so_on.js'
}
and in development mode, it will add webpack-dev-server's essential entry
I use this project to make a multiple page website, so I use multiple entry config.
I user webpack-html-plugin to generate html files, by default, it will include all output files in html for you.
but I want every html include its own bundle files, so I have to add 'chunks' config when use this plugin