Как сделать два бандл файла?

Question

[vaskadogana]

Хочу сделать два бандл файла. Один основной, второй только с подсказками будет включать в себя три файла (jq, enjoyhint и словарь).
Смысл затеи, чтобы этот скрипт грузился после того как основное приложение будет уже работать.

Текущий конфиг:

const path = require('path')
const webpack = require('webpack')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer');

module.exports = {
  context: path.join(__dirname, '../src'),

  entry: {
    app: './entry.jsx'
  },

  output: {
    filename: '[name]-bundle.js',
    chunkFilename: '[name]-[hash].chunk.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader", // compiles Sass to CSS
               
         }]
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'url-loader?limit=100000' 
      },
    ],
    
  },
  
  resolve: {
    extensions: ['.js', '.jsx', '.scss', '.css'],
    modules: [
      path.join(__dirname, '../src'),
      'node_modules'
    ],
  },
 
  
  plugins: [

    new LodashModuleReplacementPlugin({
      'collections': true,
      'shorthands': true,
    }),

    new HtmlWebpackPlugin({
      template: 'index.template.html'
    }),
    new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [
            autoprefixer(),
          ]
         }
    }),
    new webpack.IgnorePlugin(/cptable/),//was need for fix bug with this library
    
  ],
  node: {
        fs: "empty"
  },
  externals: [
        {  "./cptable": "var cptable",  "./jszip": "jszip" }
  ],
}

Answer 1

[Никита Геннадич]

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

Итак, чтобы получить два бандла, проще всего создать отдельную entry_point для каждого из них.

В конфиге это будет выглядеть примерно следующим образом:

const webpack = require('webpack');
const constants = require('./constants');
const path = require('path');

const config = {
entry: {
	app: './entry.jsx',
	// path, кстати, можно ещё и вот так использовать:
	anotherEntryPoint: [path.resolve(constants.src_path, 'anotherEntryPoint', './entry_two.jsx')],
},
output: {
	path: constants.dst_path,
	filename: 'js/[name].js',
},
// Далее остальной конфиг...
}

Собственно, вот и всё.

Comments

[vaskadogana]

Интересное решение, не думал в эту сторону. А как себя поведет сборка, если делать иморт кода из A в Б и обратно. Код будет включен в оба бандла или они перелинкуются между собой?

p.s. решил через splitChunks есть возможность указывать размер чанка, а также делить по типам commons, vendors, styles и т.п.