Webpack代码分裂奇怪的命名

所以我一直在做一个小方面的项目几天，现在熟悉webpack。 我已经几乎所有东西都以我想要的方式工作了，但是我对webpack拆分块的命名约定是非常奇怪的，而且我觉得我没有做一些正确的事情。

目前我有我的所有Javascript导出到内容\ js [name] .bundle.js ，它工作正常，直到我开始使用确保。

例如，我的主要模块被称为应用程序，所以应用程序的最终目的地是content \ js \ app.bundle.js，但是当我使用时确保它创build一个文件，如1.content \ js \ 1.bundle.js 。 我想得到它输出到像content \ js \ 1.bundle.js或类似的东西。 如果我至less可以放弃这个前缀，那么我会处于良好的状态，我想为我想做的事情做…

显然我无法发布图像，直到我获得更多的代表，但这里是我的输出和当前webpackconfiguration文件。

我感谢帮助！

Hash: 23e616429710d37754d3 Version: webpack 1.13.1 Time: 12793ms Asset Size Chunks Chunk Names content\js\app.bundle.js 3.16 kB 0 [emitted] app 1.content\js\1.bundle.js 15.1 kB 1 [emitted] content\js\vendor.bundle.js 4.31 MB 2 [emitted] vendor content\css\app.styles.css 6.27 kB 0 [emitted] app content\css\vendor.styles.css 463 kB 2 [emitted] vendor index.html 5.19 kB [emitted] [0] multi app 28 bytes {0} [built] [0] multi vendor 88 bytes {2} [built] + 455 hidden modules Child extract-text-webpack-plugin: + 2 hidden modules Child extract-text-webpack-plugin: + 2 hidden modules Child html-webpack-plugin for "index.html": + 20 hidden modules Child extract-text-webpack-plugin: + 7 hidden modules 

  var path = require('path'); var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); // Webpack Plugins var ExtractTextPlugin = require('extract-text-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); // Figure out what mode we're running in var mode = process.env.NODE_ENV; if (mode == 'production') { console.log('Building for production...'); } else { console.log('Building for development...'); } // Define some paths that we'll use throughout the application var pathBaseOutput = path.join(__dirname, 'public'); var pathEntryApp = path.join(__dirname, 'app'); var pathJsOutput = 'content/js/';//path.join('content', 'js'); var pathCssOutput = path.join('content', 'css'); var pathIndexOutput = pathBaseOutput; // App webpack var app_pack = {}; // Add the entries for our app app_pack['entry'] = { // The app itself 'app': [ path.join(pathEntryApp , 'app.client')], // The vendor modules we want to abstract out 'vendor': [ 'jquery', 'react', 'react-bootstrap', 'react-dom', 'bootstrap-loader', 'tether' ] } // Define the output directory of the javascript files app_pack['output'] = { path: pathBaseOutput, filename: path.join(pathJsOutput, '[name].bundle.js') } // Define any extra module loaders we might be interested in app_pack['module'] = { loaders: [ // Inject css { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') }, // Process and inject SASS { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader') }, // Process and inject .woff2 fonts { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader' }, // Process and inject .tff, .eot, and .svg files { test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, loader: 'url-loader' }, // Transform JSX in .jsx files { test: /\.jsx$/, loader: 'babel-loader', query: { presets: [ 'es2015', 'react' ] } }, { test: /\.hbs$/, loader: "handlebars" } ] } // Define where modules should be resolved from app_pack['resolve'] = { // Allow require('./blah') to require blah.jsx extensions: [ '', '.js', '.jsx' ], // The root of our web modules root: [ path.resolve('./app/modules'), ], // Allow requiring modules from npm modulesDirectories: [ 'node_modules' ] } // Define what plugins we want to use app_pack['plugins'] = [ // Create a vendor chunk for all our vendor code new webpack.optimize.CommonsChunkPlugin('vendor', path.join(pathJsOutput, '[name].bundle.js'), Infinity), // Resolve $, and jQuery so that modules that use them can resolve to require('jquery') // Note: This does NOT expose them to the global browser accessible namespace new webpack.ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery' }), // Extract CSS files to a seperate place new ExtractTextPlugin(path.join(pathCssOutput, '[name].styles.css'), { allChunks: true }), // Pass the node environment down the webpack new webpack.EnvironmentPlugin([ 'NODE_ENV' ]), new CleanWebpackPlugin( [pathCssOutput, pathJsOutput, path.join(pathIndexOutput, 'index.html')] ), new webpack.BannerPlugin('Copyright 2016 Brandon Garling. Released under the MIT license'), new HtmlWebpackPlugin({ title: 'Taskie', template: 'app/index.hbs', hash: true }) ]; // Allow postcss using autoprefixer app_pack['postcss'] = [ autoprefixer ]; /* * Mode specific injections */ // Production if (mode == 'production') { // Add plugins app_pack['plugins'].push( new webpack.optimize.UglifyJsPlugin() ); // Search for equal or similar files and deduplicate them in the output. // This comes with some overhead for the entry chunk, but can reduce file size effectively. app_pack['plugins'].push( new webpack.optimize.DedupePlugin() ) } // Other (Development) else { // Add source maps inline app_pack['devtool'] = '#inline-source-map'; // Add plugins } module.exports = app_pack; 

Answer 1

您正在使用反斜杠设置path作为output.filename选项。 使用output.path仅为实际文件名设置目标文件夹和output.filename 。

Answer 2

我想到了！ 我不得不添加以下到我的app_pack的输出属性：

 chunkFilename: path.join(pathJsOutput, '[name].[id].bundle.js') 

显然我只是不够努力，这是正确的在我面前的文档位于这里： https : //github.com/webpack/docs/wiki/configuration

多谢你们！