Webpack production build ничего не загружает

Question

Я работаю над приложением, использующим React и Webpack на некоторое время. Моя среда разработки работает нормально, и все загружается должным образом с помощью webpack-dev-сервера.

Я решил запустить производственную сборку приложения, чтобы увидеть, как конечный продукт может выглядеть по размеру и наблюдать общий вывод сборки продукта webpack.

Оказалось, что работает webpack -p, в то время как он производит вывод (подробнее об этом через минуту), ничего не загружает, когда я нахожу сайт в браузере. Быстрая проверка вывода говорит мне, что ни один из моих кодов компонентов не превращает его в сборку webpack -p.

Изображения и HTML-копии, поскольку они существуют в моей папке src (dev), однако мой вывод пакета JS очень мал - файл (main.js) составляет всего 246 байт.

Вот вывод команды 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 

Когда я запускаю версию развития проекта, выход заметно отличается ... Я знаю, что зависимости DEV сервера находятся там, и код не минимизирован. И, что самое главное, все работает так, как ожидается при запуске dev-сервера.

$ 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 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 

Вот мой webpack.config.babel.js файл:

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_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' 
      } 
     ] 
    } 
} 

Я не думаю, что у меня особо сложный, или необычные настройки, и я попытался изменить все, от es2015/es6 для commonJS уже, с тем же результатом.

Я не понимаю, что может быть здесь; надеясь, что кто-то может указать на некоторые очевидные ошибки, которые у меня есть, или, возможно, предложить изменения/изменения конфигурации, которые могут решить эту проблему.

Спасибо, что нашли время, чтобы прочитать все!

Answer 1

Как я уже упоминал в своем комментарии, я успешно использую webpack уже несколько месяцев, и я никогда не сталкивался с использованием файла HTML в качестве точки входа.

Обычно вы используете Webpack для упаковки javascript, css и иногда изображений (то есть: «активы»), которые будут использоваться по файлам html. Обслуживание этого HTML-файла выходит за рамки ответственности Webpack.

Я предложил бы использовать Webpack для генерации только окончательного яваскрипта свертка, а затем с помощью какого-либо другого метода (то есть: экспресс, или какой-либо другой веб-сервер), чтобы служить файл и HTML, потребляющий его.