'[名称]。[chunkhash] .js'，名称无效

Question

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 webpackConfig 

Answer 1

It'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

• output [hash:8].[name].js file
• css/less import with extract text plugin in production
• webpack-dev-server set up
• images loader
• fonts loader
• html plugin to generate html files

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