How to use static js generated throught webpack for react app with es6

Question

I am new to es6/react js and webpack and from last 6 days I am trying to create startkit for react app with es6 and webpack below is my webpack.config.js , I am successfully able to configure web pack dev server. My app is running on http:/localhost:8080/webpack-dev-server. When I am running npm build to generate bundle.js. if I am running my app only using localhost:8080 my app is running in chrome but giving error in mozilla (r.render is not function). Webpack is very confusing... Can we run file bundle.js file locally on file:// server. means like in normal html file if I include that bundle.js file it should work right?

My webpack.config.js

var path = require('path');
var webpack = require('webpack');
//var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var mainPath = path.join(__dirname, 'app', 'index.js');
var buildPath = path.join(__dirname, 'dist/assets/');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer')
var sassLoaders = [
  'css-loader?sourceMap',
  'postcss-loader',
  'sass-loader?sourceMap&includePaths[]=' + path.join(__dirname, './app')
]

module.exports = {
    // Makes sure errors in console map to the correct file
    // and line number
    devtool: 'cheap-module-source-map',
    entry: {
      'vendor': ['react','react-dom'],
      "bundle":mainPath
    },
    module: {
      loaders: [
        {
          test: [/\.js$/],
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015', 'react']
          }
        },
        // //{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
        // { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
        // { test: /\.s?css$/, loaders: ['style', 'css', 'sass','css?sourceMap', 'sass?sourceMap'] }
        { test: /\.scss$/,
          loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
        },
        { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=/fonts/[name].[ext]' }
      ]
    },
    output: {
      // We need to give Webpack a path. It does not actually need it,
      // because files are kept in memory in webpack-dev-server, but an
      // error will occur if nothing is specified. We use the buildPath
      // as that points to where the files will eventually be bundled
      // in production
      path: buildPath,
      filename: '[name].js',
      publicPath: 'http://localhost:8080/assets'
    },
    plugins: [
      // Pro-tip: Order matters here.
      new ExtractTextPlugin('[name].css'), new webpack.optimize.CommonsChunkPlugin(['bundle', 'vendor'], '[name].js')
    ],
    postcss: [
      autoprefixer({
        browsers: ['last 2 versions'],
      //path: "./dist",
      filename: '[name].js',
      // Everything related to Webpack should go through a build path,
      // localhost:8080/build. That makes proxying easier to handle
      publicPath: '/dist/'
      })
    ],
    resolve: {
      extensions: ['', '.js', '.jsx','.sass','.woff','.ttf','.eot','.svg'],
      root: [path.join(__dirname, './app')]
    },
    watch:true
};

my index.html

<!DOCTYPE html>
<html>
<head>
    <title>React Home Page</title>
    <link rel="stylesheet" href="assets/bundle.css" />
</head>
<body>
<div id="react-app"></div>
<script type="text/javascript" src="assets/vendor.js"></script>
<script type="text/javascript" src="assets/bundle.js"></script>
</body>
</html>

Laurens Lavaert Laurens Lavaert · Accepted Answer · 2017-05-25T12:51:10

You don't have to link it yourself, webpack does that for you.

the HtmlWebpackPlugin will make sure that the bundle is being linked in the file that you configure.

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./app/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: "babel-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader"] }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "app/index.html"
    })
  ]
};

How to use static js generated throught webpack for react app with es6

1 Answers