Webpack исключает записи для CommonsChunkPlugin

Я пытаюсь настроить конфигурацию производства webpack. Все выглядит хорошо. Однако я понял, что, используя плагин chons commons, он охватывает все файлы, как обычно. Что я хочу сделать, это разделение общих библиотечных модулей и общих модулей приложений. Мой конфигурационный файл:

module.exports = {
  entry: {
    lib: ["react", "react-dom"],
    app: "./ui-v2/app/app.js",
    app2: "./ui-v2/app/app2.js"
  },
  output: {
    path: path.join(__dirname, "target/ui/v2"),
    filename: "/app/[name].[chunkhash].min.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.(png|jpg|svg)/,
        loader: "file-loader?name=img/[name].[hash].[ext]"
        // loaders: ["url", "image-webpack"]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader", {
          publicPath: __dirname
        })
      },
      {
        test: /\.(woff|woff2|ttf|eot)$/,
        loader: "file-loader?name=fonts/[name].[hash].[ext]"
      }
    ]
  },
  plugins: [
    clean,
    new webpack.optimize.CommonsChunkPlugin("common", "app/common.[chunkhash].js"),
    new webpack.ProvidePlugin({
      React: "react",
      ReactDOM: "react-dom",
      $: "jquery",
      _: "lodash"
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
      warnings: false
      sourceMap: true
    },
    mangle: {
    except: ["exports", "import", "$", "_", "require", "React", "ReactDOM"]
    }
    }),
    new ExtractTextPlugin("styles/[name].[contenthash].css"),
    new Manifest()
  ]
}

В основном у меня есть 3 модуля в приложении; app.js, app2.js и общий компонент user.js.

То, что я хочу достичь, - это связать все связанные с библиотекой файлы, такие как реакция, реагирование, lodash и т.д. в наборе lib, и общие компоненты приложения, такие как user.js, в общем комплекте. Чтобы сделать это, я подумал, что есть возможность исключить файлы, которые я не хочу, чтобы они попадали в "общий" файл. Если я использую этот вывод, какова точка для долгосрочных файлов кеширования для библиотечных пакетов, потому что всякий раз, когда я получаю общий компонент в моем проекте, они войдут в общий пакет, а хэш содержимого будет другим, но в этой библиотеке ничего не меняется файлы, такие как реакция, jquery, lodash и т.д.

Во всяком случае, то, что у меня есть в конце процесса сборки, все еще идет в общий комплект, а lib ничего не имеет и размеры файла:

app.<hash>.min.js -> 3.05KB
app2.<hash>.min.js -> 3.05KB
lib.<hash>.min.js -> 165 Bytes (has almost nothing!)
common.<hash>.js -> 678 KB

Есть ли способ достичь того, что я хочу или что будет лучшим подходом к созданию производства в подобных случаях? Спасибо!

Ответ 1

Потому что первый параметр для CommonsChunkPlugin является "общим", где он должен быть "lib". Плагин берет запись с именем, совпадающим со значением его первого параметра.

Простой пример конфигурации, выбранный из webpack wiki -

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

Обратите внимание, что запись "vendor" снова указана в CommonsChunkPlugin

Ответ 2

Вы должны проверить плагин для Webpack DLL.

https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll/README.md

С помощью этого плагина вы объединяете общие зависимости сторонних поставщиков, такие как React и друзей в DLL, который по сути является просто манифестом JSON, который сопровождается вашим обязательством, завернутым в контекст webpack и кэшированным на диск.

В коде проекта у вас будут свои общие компоненты, зависящие от React и друзей, и у вас будет код вашего приложения, который зависит от ваших общих компонентов, а также от реагирования и друзей.

Ваш проект будет включать плагин DLL Reference, как вы можете видеть здесь:

https://github.com/webpack/webpack/blob/cb3d8e2097503c7245c5dda5b7a6e9d63421a72b/examples/dll-user/README.md

Это будет следить за тем, чтобы ваши общие компоненты и ваш код приложения вытаскивали React и другие сторонние модули из одного и того же набора DLL. Это может помочь улучшить время сборки и производительность сервера dev и перезагрузки модуля.