I cant use the dll with webpack-dev-server

[henningborchers]

Do you have a sample config for your plugin with webpack-dev-server ?

[developer239]

@henningborchers I am slowly updating my repo. I should be able to finish it this weekend.

https://github.com/developer239/react-redux-apollo-graphql

This is going to be your dll file:

const webpack = require('webpack')
const path = require('path')


const MODE = process.env.NODE_ENV === 'production' ? 'production' : 'development'

// TODO: Update modules
// These libraries are built only once.
const vendors = [
  'react',
]

module.exports = {
  mode: MODE,
  devtool: 'source-map',
  entry: {
    vendors,
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader',
      },
    ],
  },
  output: {
    publicPath: '/',
    filename: 'vendors-[hash].js',
    path: path.resolve(__dirname, '..', 'public', 'vendor'),
    library: 'vendor',
  },
  plugins: [
    new webpack.DllPlugin({
      name: 'vendor',
      path: path.resolve(__dirname, '..', 'public', 'vendor', 'vendor-manifest.json'),
    }),
  ],
}

This is going to be your common file:

const path = require('path')
const DllLinkPlugin = require("dll-link-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')


const DIST_DIR = 'public'
const SRC_DIR = 'src'

module.exports = {
  output: {
    publicPath: '/',
    filename: '[name]-[hash].min.js',
    path: path.resolve(__dirname, '..', DIST_DIR),
  },
  plugins: [
    new CleanWebpackPlugin([DIST_DIR]),
    new HtmlWebpackPlugin({
      template: 'src/static/index.html',
      inject: 'body',
      filename: 'index.html',
    }),
    // https://github.com/clinyong/dll-link-webpack-plugin
    new DllLinkPlugin({
      config: require('./webpack.dll'),
      htmlMode: true,
    }),
    // HTML is generated by HtmlWebpackPlugin but we might have other static
    // assets like favicon.ico. All static files should live here.
    new CopyWebpackPlugin([
      { from: path.resolve(__dirname, '..', SRC_DIR, 'static'), to: '.' },
    ]),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      './node_modules',
      './src',
    ],
  },
}

This is going to be your dev file:

import webpack from 'webpack'
import merge from 'webpack-merge'
import common from './webpack.common'


const DEV_PORT = 3000

export default merge(common, {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client?reload=true&overlay=false',
    './src/index.js',
  ],
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    hot: true,
    historyApiFallback: true,
    contentBase: './public',
    port: DEV_PORT,
  },
})

This is going to be your prod file:

const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.common')


module.exports = merge(common, {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
  ],
})