Question

我想得到一个CSS文件，该文件是我的开发环境标准CSS文件的合并版本和缩小版本。具有基于文件内容的哈希名称，该名称会自动作为标记添加到我的分发文件夹中的结果index.html文件中。

这可能吗？我想这是因为我已经让Webpack 4可以完成我需要它做的所有其他事情。如果是这样，我将如何处理？

请介意，您必须采用这种方式进行设置。我不允许在JS中使用import语句等。

我尝试过使用Mini Css Extract插件和Optimize CSS Assets Webpack插件来查看它们是否可以满足我的要求，但是由于我从未得到任何输出文件，我可能做错了事（我知道不会）给我修改后的index.html，但至少要有CSS文件才行）。

我当前的文件结构基本上是： 'mainFolder'/ public / css <-src css文件夹， 'mainFolder'/ dist / css <-我要在其中放置缩小文件的dist文件夹

我的配置当前是这样设置的：

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = { 
    entry: [
        './public/js/app.js',
        './public/js/filters/weekday.js',
        './public/js/filters/dial-in.js',
        './public/js/filters/time.js',
        './public/js/filters/group-member.js',
        './public/js/filters/bool-to-icon.js',
        './public/js/filters/date-format.js',
        './public/js/filters/time-format.js',
        './public/js/services/main.js',
        './public/js/configs/config.js',
        './public/js/controllers/main.js',
        './public/js/pages/calendar/controller.js',
        './public/js/pages/company/view/controller.js',
        './public/js/pages/company/edit/controller.js',
        './public/js/pages/group-meeting/create/controller.js',
        './public/js/pages/group-meeting/detail/controller.js',
        './public/js/pages/group-meeting/view/controller.js',
        './public/js/pages/group-meeting-calendar/controller.js',
        './public/js/pages/login/controller.js',
        './public/js/pages/meeting-link/view/controller.js',
        './public/js/pages/meeting-link/edit/controller.js',
        './public/js/pages/meeting-link/detail/controller.js',
        './public/js/pages/user/view/controller.js',
        './public/js/pages/user/edit/controller.js',
        './public/js/lib/angular-semantic-ui.min.js'
    ],
    output: {
        filename: 'js/[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    devtool: 'source-map ',
    plugins: [
        new CleanWebpackPlugin(['dist'], {

        }), 
        new HtmlWebpackPlugin({
            title: 'Zenvite',
            template: './public/templates/index.html',
            filename: 'templates/index.html'
        }),
        new CopyWebpackPlugin([
            //{ from: 'public/css', to:'css'},
            { from: 'public/media', to:'media'},
            { from: 'public/js/pages', to: 'js/pages', ignore: [ '*.js' ]},
            { from: 'public/templates/app.html', to: 'templates'}
        ]),
        new MiniCssExtractPlugin({
            filename: 'app.css',
            chunkFilename: '[contenthash].css',
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                          // you can specify a publicPath here
                          // by default it use publicPath in webpackOptions.output
                          publicPath: '../public'
                        }
                    },
                    "css-loader"
                ]
            }
        ]

    },
    optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
};

同样，最佳结果将是具有[contenthash] .css之类的东西，它们具有我的标准CSS的合并版本和缩小版本，并在可能的情况下在我的index.html文件中添加一个标记。到目前为止，我什么都没有（除了将标准文件复制到dist目录之外）

在此先感谢您的帮助，如果我能回答任何问题，请随时提问。

Answer 1

最后，当我的主管意识到在编译过程中导入语句被剥离时，他们允许了。因此，我们使用该路线来实现我们想要的目标。波纹管最终就是我们所追求的

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = { 
    entry: [
        './public/js/app.js',
        './public/js/filters/weekday.js',
        './public/js/filters/dial-in.js',
        './public/js/filters/time.js',
        './public/js/filters/group-member.js',
        './public/js/filters/bool-to-icon.js',
        './public/js/filters/date-format.js',
        './public/js/filters/time-format.js',
        './public/js/services/main.js',
        './public/js/configs/config.js',
        './public/js/controllers/main.js',
        './public/js/pages/calendar/controller.js',
        './public/js/pages/company/view/controller.js',
        './public/js/pages/company/edit/controller.js',
        './public/js/pages/group-meeting/create/controller.js',
        './public/js/pages/group-meeting/detail/controller.js',
        './public/js/pages/group-meeting/view/controller.js',
        './public/js/pages/group-meeting-calendar/controller.js',
        './public/js/pages/login/controller.js',
        './public/js/pages/meeting-link/view/controller.js',
        './public/js/pages/meeting-link/edit/controller.js',
        './public/js/pages/meeting-link/detail/controller.js',
        './public/js/pages/user/view/controller.js',
        './public/js/pages/user/edit/controller.js',
        './public/js/lib/angular-semantic-ui.min.js'
    ],
    output: {
        filename: 'js/app.[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    devtool: 'source-map ',
    plugins: [
        new CleanWebpackPlugin(['dist'], {

        }), 
        new HtmlWebpackPlugin({
            title: 'Zenvite',
            template: './public/templates/index.html',
            filename: 'templates/index.html'
        }),
        new CopyWebpackPlugin([
            //{ from: 'public/css', to:'css'},
            { from: 'public/media', to:'media'},
            { from: 'public/js/pages', to: 'js/pages', ignore: [ '*.js' ]},
            { from: 'public/templates/app.html', to: 'templates'}
        ]),
        new MiniCssExtractPlugin({
            filename: 'css/app.[contenthash].css'
        })
    ],
    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        }]
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true,
                parallel: true,
                sourceMap: true, // Must be set to true if using source-maps in production
        }),

            new OptimizeCSSAssetsPlugin({})
        ]
   }
};

Webpack（带有插件）是否可以缩小我的CSS文件，将其放在我的dist文件夹中，然后将标签添加到index.html

1 个答案: