Webpack制作ビルドが動作しない

dev envで作業しても何の問題もなく、ホットリロードしても問題ありません。プロダクションビルドを非常に難しいものにすることを試み、空白のページだけを得ること。ここにも同様の質問があるようですが、エントリーポイントとしてhtmlを使用していません。前もって感謝します。Webpack制作ビルドが動作しない

package.json

{ 
    "name": "dc", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0", 
    "prod": "webpack -p --progress --config prod.config.js" 
     }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "axios": "^0.9.1", 
    "babel-core": "^6.7.2", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.7.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-react-hmre": "^1.1.1", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "^0.8.5", 
    "history": "^2.0.1", 
    "isomorphic-fetch": "^2.2.1", 
    "node-sass": "^3.4.2", 
    "react": "^0.14.7", 
    "react-css-transition-replace": "^1.1.0", 
    "react-dom": "^0.14.7", 
    "react-hot-loader": "^1.3.0", 
    "react-redux": "^4.4.1", 
    "react-router": "^2.0.1", 
    "redux": "^3.3.1", 
    "redux-logger": "^2.6.1", 
    "redux-thunk": "^2.0.1", 
    "sass-loader": "^3.2.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.12.14" 
    }, 
    "dependencies": { 
    "axios": "^0.9.1",  
    "history": "^2.0.1", 
    "isomorphic-fetch": "^2.2.1",  
    "react": "^0.14.7", 
    "react-redux": "^4.4.1", 
    "react-router": "^2.0.1", 
    "redux": "^3.3.1" 
    } 
}

生産コンフィグ

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
module.exports = { 
    entry : ["./app/App.js"], 
    output : { 
    filename: "bundle.js", 
    publicPath: 'dist/', 
    path : path.resolve(__dirname, 'dist/') 
    }, 
    devtool: 'source-map', 
    devServer: { 
    contentBase: 'dist/' 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
     'process.env': { 
      NODE_ENV: '"production"', 
     }, 
     __DEVELOPMENT__: false, 
     }), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new ExtractTextPlugin("styles.css"), 
     new webpack.NoErrorsPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: true, 
     }, 
    }), 
    ], 
    module : { 
    loaders : [ 
     { test : /\.jsx?$/, loader : 'babel-loader', 
     query : { 
      presets : ['react', 'es2015', 'react-hmre'] 
     } 
     }, 
      { test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"}, 
      { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, 
      { test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") } 
    ] 
    } 

};

index.htmlを

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>lol</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
</body> 
</html>

出典

2016-04-11 chrysillo

どのようにプロードバンドルを提供していますか？それを含むHTMLファイルはどのように見えるのですか？ – Interrobang

が質問に追加されました – chrysillo

'src'リファレンスが正しいと確信していますか？コンソールエラー？ – Jack

私は少し異なる溶液で取り組んできました。私がやっていることは、webpackを使ってファイルをバンドルし、koaサーバを使って静的ファイルを提供し、次にNODE_ENVをプロダクションに設定するnpm開始スクリプトを用意することです。

package.json：

{ 

    "name": "react", 
    "version": "1.0.0", 
    "description": "some description", 
    "main": "index.js", 
    "scripts": { 
    "test": "test", 
    "start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js", 
    "dev": "webpack-dev-server --progress --colors --watch", 
    "build": "webpack --progress --watch" 
    }, 
    "author": "your_name", 
    "license": "ISC", 
    "dependencies":{ 
    "babel-core": "^6.7.2", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "copy-webpack-plugin": "^1.1.1", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "image-webpack-loader": "^1.6.3", 
    "json-loader": "^0.5.4", 
    "sass-loader": "^3.2.0", 
    "style-loader": "^0.13.0", 
    "koa": "2.0.0-alpha.3", 
    "koa-convert": "1.2.0", 
    "koa-static": "2.0.0", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "webpack": "^1.12.14", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

server.js：見てみましょう

'use strict'; 


const port = process.env.PORT || 3000; 
const Koa = require('koa'); 
const serve = require('koa-static'); 
const convert = require('koa-convert'); 
const app = new Koa(); 
const _use = app.use; 
app.use = (x) => _use.call(app, convert(x)); 
app.use(serve('./build')); 

const server = app.listen(port, function() { 
let host = server.address().address; 
let port = server.address().port; 
console.log('listening at http://%s:%s', host, port); 
});

とfinaly webpack.config.js：

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 

module.exports = { 
    entry: './main.js', 
    output: { path: __dirname + "/build/", filename: 'bundle.js' }, 
    module: { 
    loaders: [ 
     { 
     test: /.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("style", "css!sass?") 
    }, 
     { 
     test: /\.json$/, 
     loader: "json" 
     }, 
    { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
      'file?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("main.css"), 
    new CopyWebpackPlugin([ 
    { 
     from: __dirname + '/index.html', 
     to: __dirname + '/index.html' 
    }, 
    ]) 
    ] 
};

index.htmlファイルとmain.jsファイルを使ってそれらを実行すると、それに反応するものが生成されます:)私は最近、私のソリューションがどのように正確に見えるかについての記事を書いています。お気軽にお気軽にご連絡ください：https://medium.com/@TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6

出典

2016-06-08 20:08:30

Webpack制作ビルドが動作しない

答えて

関連する問題