所以我已经在一个小小的项目上工作了几天，现在熟悉webpack。我几乎所有的东西都按照我想要的方式工作但是我对webpack拆分块的命名约定非常奇怪，我觉得我没有做正确的事情。
目前，我将所有Javascript导出到内容\ js [名称] .bundle.js ，直到我开始使用确保工作正常。
例如，我的主模块称为app，因此app的最终目的地当前为 content \ _ js \ app.bundle.js 但是当我使用时确保它创建了一个像这样的文件1.content \ JS \ 1.bundle.js 即可。我想把它输出到像 content \ js \ 1.bundle.js 之类的东西。如果我至少可以删除那1个前缀，那么我就能保持良好的状态，我想我想做的事情......
显然我不能发布图片，直到我获得更多的代表，但这是我的输出和当前的webpack配置文件。
我很感激帮助！
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;
答案 0 :(得分：2)
您正在设置带有反斜杠的路径output.filename选项。使用output.path设置目标文件夹，仅使用output.filename作为实际文件名。
答案 1 :(得分：0)
我明白了！我必须将以下内容添加到app_pack的输出属性中：
chunkFilename: path.join(pathJsOutput, '[name].[id].bundle.js')
显然我只是看起来不够努力，在我面前的文件位于我面前：https://github.com/webpack/docs/wiki/configuration
谢谢你们！