質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

320閲覧

webpackでビルドした静的なサイトについて

pokotyan

総合スコア20

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2018/07/07 17:26

webpackでビルドした静的なサイト(react、reduxで作成)がブラウザで開くと真っ白になります。

webpackでビルドしたファイルはbuild/index.htmlとして吐き出しているのですが、そのindex.htmlをブラウザにドラッグアンドドロップして開いてみても真っ白なページになります。

静的なサイトであれば、ビルド後のindex.htmlをブラウザでひらけばページが表示されると思ったのですが、そうではないのでしょうか?

開発環境(webpack-dev-serverを使ってます)の際は問題なく表示されてます。
また、netlifyなどの静的サイトジェネレーターでもちゃんと表示されています。

webpackの設定は以下のようになっています。

よろしくお願いいたします。

webpack.common.js

const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { target: 'web', entry: ['babel-polyfill', './src/index.js'], module: { rules: [ { test: /.js$/, use: [ { loader: 'babel-loader' } ], exclude: /node_modules/ }, { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { context: path.join(process.cwd(), './src'), importLoaders: 2, modules: true, sourceMap: true } }, { loader: 'postcss-loader', options: { sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true } } ] }, { test: /.(png|jpe?g|gif|svg|woff2?|ttf|eot)$/, use: [ { loader: 'url-loader', options: { limit: 10000 } } ] } ] }, node: { console: true, fs: 'empty', net: 'empty', tls: 'empty' }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new HtmlWebpackPlugin({ hash: true, filename: 'index.html', template: './src/template/index.html.ejs', inject: 'body' }) ] };

webpack.dev.js

const webpack = require('webpack'); const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'development', devtool: 'cheap-module-eval-source-map', entry: ['react-hot-loader/patch'], output: { path: `${__dirname}/build`, filename: 'bundle.js', publicPath: '/' }, plugins: [new webpack.HotModuleReplacementPlugin()], devServer: { contentBase: 'build', open: true, hot: true, publicPath: '/', historyApiFallback: true } });

webpack.prod.js

const webpack = require('webpack'); const merge = require('webpack-merge'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode: 'production', devtool: 'hidden-source-map', output: { path: `${__dirname}/build`, filename: 'bundle.js', publicPath: '/' }, optimization: { splitChunks: { name: 'vendor', chunks: 'initial' } }, plugins: [ new UglifyJSPlugin({ sourceMap: true, uglifyOptions: { mangle: true, ecma: 5, ie8: false, // React doesn't support IE8 compress: { arrows: true, booleans: true, collapse_vars: true, comparisons: false, computed_props: false, conditionals: false, dead_code: true, drop_console: false, drop_debugger: false, ecma: false, evaluate: false, expression: false, global_defs: {}, hoist_funs: false, hoist_props: false, hoist_vars: false, if_return: false, inline: false, join_vars: false, keep_classnames: false, keep_fargs: false, keep_fnames: false, keep_infinity: false, loops: false, negate_iife: false, passes: false, properties: false, pure_funcs: false, pure_getters: false, reduce_funcs: false, reduce_vars: false, sequences: false, side_effects: false, switches: false, toplevel: false, top_retain: false, typeofs: false, unsafe: true, unsafe_arrows: false, unsafe_comps: false, unsafe_math: false, unsafe_methods: false, unsafe_proto: false, unsafe_regexp: false, unused: true, warnings: false }, output: { beautify: false, comments: false } } }) ] });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Reactなどを使っているとドラッグアンドドロップでは動かない。
ビルド後でもなんらかのローカルサーバーを使う必要がある。

投稿2018/07/08 01:36

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問