代码之家  ›  专栏  ›  技术社区  ›  Lukas Liesis

Webpack多个块包含相同的依赖项

  •  1
  • Lukas Liesis  · 技术社区  · 6 年前

    为什么我要把相同的代码包含到几个块中?少了什么?

    enter image description here

    const path = require('path');
    const webpack = require('webpack');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    
    module.exports = {
      mode: 'production',
      target: 'web',
      // devtool: 'source-map',
      entry: {
       echarts: ['echarts'],
        vendor_1: ['react', 'immutable', 'lodash', 'redux', 'redux-saga'],
        vendor_2: ['@material-ui/core', '@tinymce/tinymce-react'],
        client: ['babel-polyfill', path.join(__dirname, 'app/index.js')],
      },
      output: {
        path: path.join(__dirname, '/dist/'),
        filename: '[hash].[name].js',
        publicPath: './',
      },
      resolve: {
        modules: [
          path.join(__dirname, '/app'),
          'node_modules',
        ],
      },
      plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
          template: 'app/index.tpl.html',
          inject: 'body',
          filename: 'index.html',
        }),
        new BundleAnalyzerPlugin(),
      ],
      module: {
        rules: [
          {
            test: /\.js?$/,
            exclude: /node_modules/,
            use: [{
              loader: 'babel-loader',
            }],
          },
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]',
              'sass-loader',
            ],
          },
          {
            test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
            use: [{
              loader: 'url?limit=10000&mimetype=application/font-woff',
            }],
          },
          {
            test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
            use: [{
              loader: 'file',
            }],
          },
        ],
      },
    };
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Lukas Liesis    6 年前

    我添加了优化配置,现在可以正常工作了。

      optimization: {
        splitChunks: {
          chunks: 'initial',
        },
      },
    

    我已经玩了一些值,这是最好的结果,为我的代码库没有任何额外的代码编辑。您可以在此处找到所有可能的选项:

    https://webpack.js.org/configuration/optimization/

    谢谢帕维尔的小费;)

    推荐文章