Question

我最近尝试第一次向我的项目中添加适当的代码拆分。它确实有效，但是我认为它的效果还不错！

当我运行bundle-analyser时，我的dist文件夹中包含一堆其他包含快照和测试文件的bundle，但是我找不到任何可以解释为什么发生这种情况的信息！

这是我的webpack.config.base.js

const path = require('path');
const postcssNested = require('postcss-nested');
const postcssSimpleVars = require('postcss-simple-vars');
const postcssPresetEnv = require('postcss-preset-env');
const postcssImport = require('postcss-import');
const postcssFor = require('postcss-for');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const ExtractCssPluginConfig = new ExtractTextPlugin({
    filename: '[name].[hash].css',
    disable: false,
});

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body',
});

module.exports = {
    entry: {
        main: './src/index.jsx',
    },
    output: {
        path: path.resolve('_dist'),
        chunkFilename: '[name].[hash].bundle.min.js',
        filename: '[name].[hash].min.js',
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)?$/,
                loader: 'babel-loader',
                exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
            },
            {
                test: /\.css$/,
                loader: 'style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
                },
            },
            {
                test: /\.css$/,
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        postcssNested,
                        postcssImport,
                        postcssFor,
                        postcssPresetEnv({
                            browsers: '>1%',
                            autoprefixer: {
                                grid: true,
                                browsers: ['>1%'],
                            },
                            insertBefore: {
                                'all-property': postcssSimpleVars,
                            },
                        }),
                    ],
                },
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8000,
                        name: 'images/[hash]-[name].[ext]',
                    },
                }],
            },
            {
                test: /\.(woff|woff2|ttf|eot|otf)$/,
                use: 'file-loader?name=fonts/[name].[ext]',
            },
            {
                test: /\.(pdf)$/,
                use: [{
                    loader: 'url-loader',
                    options: { limit: 8000, name: 'documents/[hash]-[name].[ext]' },
                }],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.svg'],
        modules: [path.resolve('./node_modules')],
        alias: {
            Pages: path.resolve(__dirname, 'src/pages/'),
            Sections: path.resolve(__dirname, 'src/sections/'),
            Components: path.resolve(__dirname, 'src/components/'),
            Images: path.resolve(__dirname, 'src/images/'),
            Downloads: path.resolve(__dirname, 'src/downloads/'),
            Services: path.resolve(__dirname, 'src/services/'),
            Enum: path.resolve(__dirname, 'src/enum/'),
            Data: path.resolve(__dirname, 'src/data/'),
            Utils: path.resolve(__dirname, 'src/utils/'),
            Config: path.resolve(__dirname, 'src/config/'),
        },
    },
    plugins: [
        ExtractCssPluginConfig,
        HtmlWebpackPluginConfig,
    ],
};

这是我的webpack.config.build.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const WebpackCleanupPlugin = require('webpack-cleanup-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const baseConfig = require('./webpack.config.base');

const WebpackCleanupPluginConfig = new WebpackCleanupPlugin({
    exclude: ['webpack.stats.json'],
    quiet: true,
});

const CopyWebpackPluginConfig = new CopyWebpackPlugin([
    { from: './src/documents', to: './documents' },
]);

module.exports = () => {
    const DefinePluginConfig = new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
    });
    return (
        merge(baseConfig, {
            optimization: {
                runtimeChunk: 'single',
                splitChunks: {
                    cacheGroups: {
                        commons: {
                            test: /[\\/]node_modules[\\/]/,
                            name: 'vendors',
                            chunks: 'initial',
                            enforce: true,
                        },
                    },
                },
                noEmitOnErrors: true,
                concatenateModules: true,
                minimizer: [
                    new UglifyJsPlugin({
                        cache: true,
                        parallel: true,
                        sourceMap: false,
                    }),
                ],
            },
            plugins: [
                DefinePluginConfig,
                WebpackCleanupPluginConfig,
                CopyWebpackPluginConfig,
            ],
        })
    );
};

我尝试将与.test.js / jsx和.snap的任何文件匹配的正则表达式添加到我的module.rules对象，但是什么也没做。任何帮助将不胜感激！

Answer 1

如果测试文件位于其他目录中，则可能要考虑在js文件的模块规则中添加exclude属性。

请参阅以下文档：https://webpack.js.org/configuration/module/?_sm_au_=iVVKrMW7ZsbHQPbq#rule-exclude

或以下示例：https://webpack.js.org/configuration/?_sm_au_=iVVKrMW7ZsbHQPbq#options

另一种解决方案是使用IgnorePlugin。此处的IgnorePlugin文档：https://webpack.js.org/plugins/ignore-plugin/?_sm_au_=iVVKrMW7ZsbHQPbq

Webpack正在创建测试包和快照包

1 个答案: