vlio20 vlio20 - 3 months ago 32
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?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)?

Answer

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

Comments