vlio20 vlio20 - 1 year ago 127
React JSX Question

Webpack server configuration + external libs

I have the following webpack configuration file:

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const path = require('path');

module.exports = {
entry: [
'webpack-dev-server/client?', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
output: {
path: __dirname + '/dist/',
filename: 'bundle.js'

devtool: 'source-map',

resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']

module: {
loaders: [
test: /\.tsx?$/,
loaders: ['react-hot', 'ts'],
include: path.join(__dirname, 'app')

preLoaders: [
{test: /\.js$/, loader: 'source-map-loader'}

plugins: [
new CopyWebpackPlugin([
{from: './app/index.html', to: './dist/index.html'}
new webpack.HotModuleReplacementPlugin()
externals: {
'react': 'React',
'react-dom': 'ReactDOM'

and here is my server configuration:

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
contentBase: './dist',
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
open: 'http://localhost:2000'
}).listen(2000, 'localhost', function (err, result) {
if (err) {
return console.log(err);

console.log('Listening at http://localhost:2000/');

I want to be able to access the application from root path:
and not

One more thing, is there any way to move all the external dependancies from node_modules to
with webpack (without the need to include the
tag in the

Answer Source

First of all for set application start point you need to set publicPath to "/" or publicPath: 'http://localhost:2000' Your second question

Is there any way to move all the external dependancies from node_modules to dist with webpack?


You can use different file just for external modules and bundle that file. You don't need to take care of index.html file let webpack plugin HtmlWebpackPlugin take care of it.

First step set entry points for your app

entry: {
        'vendors': './src/vendors.ts',//your external libraries 
        'app': './src/main.ts' //your app

and out put

output: {
    publicPath: '/',
    filename: '[name].js'//this will generate two different files app.js, vendor.js

How to add HtmlWebpackPlugin?

Add this in you plugins

new HtmlWebpackPlugin({
     template: "./src/index.html",

Now it will place script tags for you