Javascript 如何在网页包中设置CSS文件的版本并更新清单？

我有一个具有多个JS入口点的网页包配置。在其中一个入口点中，我需要我的样式：

require（'../sass/app.scss'）app.css

test: /\.scss$/,
    loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader!postcss-loader!sass-loader',
    })

---

这很有效。当然，我们在部署时遇到了旧样式的问题，因为它们没有像我们的JS那样进行版本控制。我已经搜索了几个小时关于如何做到这一点，我找不到一个关于如何不仅版本的CSS，但也得到了CSS的清单文件的来源。我尝试创建我正在使用的版本控制插件的一个新实例，但它只为JS文件创建了一个清单。我假设，因为我只有JS的

输出

，这就是原因。无论如何，这是我的

webpack.config.js

：

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CommonsPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const VersioningPlugin = require('versioning-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const routes = require('./resources/assets/js/routes');

module.exports = {
    entry: routes,
    devtool: 'eval-source-map',
    output: {
        path: path.join(__dirname, 'public/js'),
        filename: '[name].[chunkhash:6].js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader?presets[]=env',
                exclude: path.resolve(__dirname, 'node_modules/')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader!sass-loader',
                })
            }

        ],
    },
    plugins: [

        new CommonsPlugin({
            minChunks: 3,
            name: 'common'
        }),

        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'napaautocarepro.dev',
            files: [
                'public/css/app.css',
                {
                    match: ['public/js/*.js', 'app/**/**/*.php', 'resources/views/**/**/*.php'],
                    fn: function(event, file) {
                        this.reload();
                    }
                }
            ]
        }, {
            injectChanges: true,
            reload: false
        }),

        new ExtractTextPlugin('../css/app.css'),

        new VersioningPlugin({
            cleanup: true,
            basePath: 'js/',
            manifestPath: path.join(__dirname, 'public/manifest.json')
        }),

        new WebpackMd5Hash()
    ]
};

const config = require('./webpack.config');
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


config.plugins.unshift(
    new CleanWebpackPlugin(['js', 'css'], {
        root: path.join(__dirname, 'public'),
        verbose: true,
        dry: false,
    }),

    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        comments: false,
        sourceMap: true
    }),

    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        canPrint: true,
        cssProcessorOptions: { discardComments: { removeAll: true } }
    })

);

module.exports = config;

这是我的

weback.prod.config.js

：

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CommonsPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const VersioningPlugin = require('versioning-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const routes = require('./resources/assets/js/routes');

module.exports = {
    entry: routes,
    devtool: 'eval-source-map',
    output: {
        path: path.join(__dirname, 'public/js'),
        filename: '[name].[chunkhash:6].js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader?presets[]=env',
                exclude: path.resolve(__dirname, 'node_modules/')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader!sass-loader',
                })
            }

        ],
    },
    plugins: [

        new CommonsPlugin({
            minChunks: 3,
            name: 'common'
        }),

        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'napaautocarepro.dev',
            files: [
                'public/css/app.css',
                {
                    match: ['public/js/*.js', 'app/**/**/*.php', 'resources/views/**/**/*.php'],
                    fn: function(event, file) {
                        this.reload();
                    }
                }
            ]
        }, {
            injectChanges: true,
            reload: false
        }),

        new ExtractTextPlugin('../css/app.css'),

        new VersioningPlugin({
            cleanup: true,
            basePath: 'js/',
            manifestPath: path.join(__dirname, 'public/manifest.json')
        }),

        new WebpackMd5Hash()
    ]
};

const config = require('./webpack.config');
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


config.plugins.unshift(
    new CleanWebpackPlugin(['js', 'css'], {
        root: path.join(__dirname, 'public'),
        verbose: true,
        dry: false,
    }),

    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        comments: false,
        sourceMap: true
    }),

    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        canPrint: true,
        cssProcessorOptions: { discardComments: { removeAll: true } }
    })

);

module.exports = config;

---

我该如何对CSS文件进行版本设置并将其放入清单中，以便自动加载正确的版本？

将

[chunkhash]

添加到文件名中，例如：

plugins: [
   //...
   new ExtractTextPlugin('../css/app.[chunkhash].css'),
   //...
]

---

（from）

“在CSS上，还可以获取CSS的清单文件。我尝试创建我正在使用的版本控制插件的新实例，但它只为JS文件创建清单。”这是我最初的问题。我可以得到一个带有散列的CSS文件，但是我不能得到一个指向该文件的清单。