javascript - Webpack 代码拆分奇怪的命名

Question

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

目前，我将所有 Javascript 导出到 content\js[name].bundle.js，在我开始使用 ensure 之前它工作正常。

例如，我的主模块称为 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;

Answer 1

您正在将带有反斜杠的路径设置为 output.filename 选项。使用 output.path 设置目标文件夹，使用 output.filename 仅设置实际文件名。