javascript - Webpack production build does not load anything -


i've been working on app using react , webpack little while. development environment works fine, , loads using webpack-dev-server.

i decided run production build of application see end-product might size-wise , observe general output of webpack product build.

it turns out running webpack -p, while produce output (more on in minute), not load @ when hit site in browser.. quick check of output tells me none of component code making webpack -p build.

the images , html copy on exist in src (dev) folder, js bundle output extremely small - file (main.js) 246 bytes.

here output running webpack -p

$ npm run build  > project@0.1.0 build /users/me/development/project > node_env=production webpack -p --bail --progress --config webpack.config.babel.js  hash: 9e5f6974ce21c920a375 version: webpack 1.12.10 time: 2003ms             asset       size  chunks             chunk names        index.html    1.45 kb          [emitted]   images/edit.svg  524 bytes          [emitted] images/search.svg    1.19 kb          [emitted]           main.js  246 bytes    0, 1  [emitted]  javascript, html     + 219 hidden modules 

when run development version of project, output markedly different... know dev server dependencies in there, , code not minified.. and, importantly - works expected when running dev server.

$ npm start  > project@0.1.0 start /users/me/development/project > webpack-dev-server --hot --display-modules --config webpack.config.babel.js  http://localhost:3333/ webpack result served / content served /users/me/development/project/dist hash: 1b34ed58f9e323966ada version: webpack 1.12.10 time: 2745ms             asset       size  chunks             chunk names        index.html    1.45 kb          [emitted]   images/edit.svg  524 bytes          [emitted] images/search.svg    1.19 kb          [emitted]           main.js    1.54 mb    0, 1  [emitted]  html, javascript 

here's webpack.config.babel.js file:

import webpack 'webpack'; import path 'path';  import modernizrwebpackplugin 'modernizr-webpack-plugin'; import modernizrconfig './modernizr.config';  const appdir = path.resolve(__dirname, './src'); const distdir = path.resolve(__dirname, './dist'); const nodemodulesdir = path.resolve(__dirname, './node_modules');  const excludedirs = /(node_modules|bower_components)/;  module.exports = {     entry: {         javascript: appdir + '/main.js',         html: appdir + '/index.html'     },     output: {         path: distdir,         filename: 'main.js',     },     devserver: {         contentbase: distdir,         inline: true,         port: 3333     },     resolve: {         extensions: ['', '.js', '.es6'],         modulesdirectories: [             'node_modules',             './src'         ]     },     plugins: [         // new webpack.optimize.commonschunkplugin('common.js'),         // new modernizrwebpackplugin(modernizrconfig),     ],     sassloader: {         sourcemap: false,         includepaths: [             appdir,             nodemodulesdir,             nodemodulesdir + '/breakpoint-sass/stylesheets/',             nodemodulesdir + '/susy/sass'         ]     },     module: {         loaders: [             { // js/jsx                 test: /\.js?$/,                 exclude: excludedirs,                 loader: 'babel',                 query: {                     cachedirectory: true,                     presets: [                         'es2015', 'react'                     ]                 }             },             { // html                 test: /\.html$/,                 exclude: excludedirs,                 loader: 'file?name=[name].[ext]'             },             { // images                 test: /\.(gif|png|jpg|jpeg|svg)$/,                 exclude: excludedirs,                 loader: 'file?name=images/[name].[ext]'             },             { // sass                 test: /\.scss$/,                 exclude: excludedirs,                 loader: 'style!css!sass'             }         ]     } } 

i don't think i've got particularly complex, or uncommon setup, , i've tried changing es2015/es6 commonjs well, same result.

i'm @ loss issue possibly here; hoping can point out obvious error i've got, or perhaps suggest config updates/changes resolve problem.

thanks taking time read everything!

as mentioned in comment, i've been using webpack months now, , i've never come across using html file entry point.

usually you'll use webpack package javascript, css, , images (ie: "assets") used by html file. serving html file outside realm of webpack's responsibility.

i suggest using webpack generate only final javascript bundle, using other method (ie: express, or other web server) serve file , html consumes it.


Comments

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -