V
V
vaskadogana2018-01-30 11:45:31
JavaScript
vaskadogana, 2018-01-30 11:45:31

I want two bundle files, can you help with the webpack config?

I want to make two bundle files. One main, the second only with hints will include three files (jq, enjoyhint and a dictionary).
The idea is that this script is loaded after the main application is already running.
current config

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 the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikita Gennadich, 2019-10-24
@Psychosynthesis

Probably the author has long found the answer to his question, however, perhaps the solution will be useful to someone else.
So, to get two bundles, the easiest way is to create a separate entry_point for each of them.
In the config, it will look something like this:

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',
},
// Далее остальной конфиг...
}

Actually, that's all.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question