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 } } }) ] });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。