javascript - Webpack production build does not load anything - Stack Overflow

admin管理员组

文章数量:1336397

I've been working on an app using React and Webpack for a little while. My development environment works fine, and everything loads properly using webpack-dev-server.

I decided to run a production build of the application to see what the end-product might look like size-wise and observe the general output of the webpack product build.

It turns out that running webpack -p, while it does produce output (more on that in a minute), does not load anything at all when I hit the site in a browser.. A quick check of the output tells me that none of my ponent code is making it into the webpack -p build.

The images and HTML copy over as they exist in my src (dev) folder, however my JS bundle output is extremely small - the file (main.js) is only 246 bytes.

Here is the output from running webpack -p

$ npm run build

> [email protected] 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 I run the development version of the project, the output is markedly different... I know that the dev server dependencies are in there, and the code is not minified.. And, most importantly - everything works as expected when running the dev server.

$ npm start

> [email protected] start /Users/me/Development/project
> webpack-dev-server --hot --display-modules --config webpack.config.babel.js

http://localhost:3333/
webpack result is served from /
content is served from /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 my webpack.config.babel.js file:

import webpack from 'webpack';
import path from 'path';

import ModernizrWebpackPlugin from 'modernizr-webpack-plugin';
import modernizrConfig from './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_ponents)/;

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('mon.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 a particularly plex, or unmon setup, and I've tried changing everything from es2015/es6 to monJS already as well, with the same result.

I'm at a loss as to what the issue could possibly be here; hoping that someone can point out some obvious error I've got, or perhaps suggest config updates/changes that could resolve this problem.

Thanks for taking the time to read everything!

I've been working on an app using React and Webpack for a little while. My development environment works fine, and everything loads properly using webpack-dev-server.

I decided to run a production build of the application to see what the end-product might look like size-wise and observe the general output of the webpack product build.

It turns out that running webpack -p, while it does produce output (more on that in a minute), does not load anything at all when I hit the site in a browser.. A quick check of the output tells me that none of my ponent code is making it into the webpack -p build.

The images and HTML copy over as they exist in my src (dev) folder, however my JS bundle output is extremely small - the file (main.js) is only 246 bytes.

Here is the output from running webpack -p

$ npm run build

> [email protected] 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 I run the development version of the project, the output is markedly different... I know that the dev server dependencies are in there, and the code is not minified.. And, most importantly - everything works as expected when running the dev server.

$ npm start

> [email protected] start /Users/me/Development/project
> webpack-dev-server --hot --display-modules --config webpack.config.babel.js

http://localhost:3333/
webpack result is served from /
content is served from /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 my webpack.config.babel.js file:

import webpack from 'webpack';
import path from 'path';

import ModernizrWebpackPlugin from 'modernizr-webpack-plugin';
import modernizrConfig from './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_ponents)/;

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('mon.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 a particularly plex, or unmon setup, and I've tried changing everything from es2015/es6 to monJS already as well, with the same result.

I'm at a loss as to what the issue could possibly be here; hoping that someone can point out some obvious error I've got, or perhaps suggest config updates/changes that could resolve this problem.

Thanks for taking the time to read everything!

• javascript
• reactjs
• webpack
• production

Share Improve this question Follow asked Jan 21, 2016 at 0:09 Dave WillidowDave Willidow 20822 silver badges88 bronze badges 4

• 3 I've been using webpack successfully for months now, and I've never e across using an HTML file as an entry point. Usually it's just a javascript file, which gets output to a dist folder or something similar, and then that file gets included on some other HTML page somewhere. – rossipedia Commented Jan 21, 2016 at 0:41
• Well, dang. That did the trick. I'm not sure why I had that in there, or where I got the idea to drop the HTML file in the entry point. Thanks for the quick-fix! – Dave Willidow Commented Jan 21, 2016 at 2:35
• Can you convert that into an answer and accept it? Thanks. :) – Juho Vepsäläinen Commented Jan 23, 2016 at 11:39
• Not sure how I can do that... unless your ment was directed towards @rossipedia :) – Dave Willidow Commented Jan 24, 2016 at 17:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

As I mentioned in my ment, I've been using webpack successfully for months now, and I've never e across using an HTML file as an entry point.

Usually you'll use Webpack to package up javascript, css, and sometimes images (ie: "assets") to be used by an html file. Serving that HTML file is outside the realm of Webpack's responsibility.

I would suggest using Webpack to generate only the final javascript bundle, then using some other method (ie: express, or some other web server) to serve that file and the html that consumes it.

本文标签： javascriptWebpack production build does not load anythingStack Overflow