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
Post a Comment