CODEWITHSUNDEEP
reactjswebpackwebpack-dev-server
vlio20
vlio20

Reputation: 9295

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?http://0.0.0.0:2000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './app/index.tsx'
  ],
  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: [
      'source-map-loader'.
      {test: /\.js$/, loader: 'source-map-loader'}
    ]
  },

  plugins: [
    new CopyWebpackPlugin([
      {from: './app/index.html', to: './dist/index.html'}
    ]),
    new webpack.HotModuleReplacementPlugin()
  ],
  builds.
  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: http://localhost:2000 and not http://localhost:2000/dist.

One more thing, is there any way to move all the external dependancies from node_modules to dist with webpack (without the need to include the script tag in the index.html file)?

Upvotes: 0

Views: 1401

Answers (2)

Jorawar Singh
Jorawar Singh

Reputation: 7621

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?

Yes

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",
     minify:false
})

Now it will place script tags for you

Upvotes: 1

Md.Estiak Ahmmed
Md.Estiak Ahmmed

Reputation: 1593

on you server configuration change your public path to

publicPath: '/',

Upvotes: 1

Related Questions