i have webpack configuration site development using es6, react , react-router. uses developer server hot-reload , routes.
/config/webpack.dev:
var webpack = require('webpack'); var path = require('path'); var app_dir = path.join(__dirname, '..', 'app'); module.exports = { debug: true, devtool: 'eval', entry: ['webpack-hot-middleware/client', './app/index.js'], module: { preloaders: [{ test: /\.js?$/, loaders: ["babel-loader", "eslint-loader"], exclude: /node_modules/, include: app_dir }], loaders: [ {test: /\.js?$/, loaders: ['react-hot', 'babel'], include: app_dir}, { test: /\.scss$/, include: app_dir, loader: 'style!css?modules&importloaders=2&sourcemap&localidentname=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputstyle=expanded&sourcemap' }, { test: /\.css$/, include: app_dir, loader: "style!css!autoprefixer?browsers=last 2 version!" }, {test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img']}, {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"}, {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"} ] }, output: { filename: 'app.js', path: path.join(__dirname, '..', 'build'), publicpath: '/static/' }, plugins: [ new webpack.hotmodulereplacementplugin(), new webpack.noerrorsplugin() ], resolve: { root: [path.resolve('../app')], extensions: ['', '.jsx', '.js'] }, sassloader: { includepaths: [path.resolve(__dirname, "./app")] } }; i run build npm start. fragment of package.json:
... scripts": { "build:webpack": "node_env=production webpack --config config/webpack.prod.js", "clean": "rimraf build", "start": "node dev_server.js" } ... dev_server.js:
var path = require('path'); var express = require('express'); var webpack = require('webpack'); var config = require('./config/webpack.dev'); var app = express(); var compiler = webpack(config); var port = process.env.port || 3000; app.use(require('webpack-dev-middleware')(compiler, { noinfo: true, publicpath: config.output.publicpath })); app.use(require('webpack-hot-middleware')(compiler)); app.use(express.static(path.join(__dirname, '..', 'static'))); app.get('*', (req, res) => { res.sendfile(path.join(__dirname, 'index.html')); }); app.listen(port, 'localhost', err => { if (err) { console.log(err); return; } console.log(`listening @ http://localhost:${port}`); }); i have /config/webpack.prod:
var path = require('path'); var webpack = require('webpack'); var extracttextplugin = require('extract-text-webpack-plugin'); var cleanplugin = require('clean-webpack-plugin'); var app_dir = path.join(__dirname, '..', 'app'); var projectrootpath = path.resolve(__dirname, '../'); var assetspath = path.resolve(projectrootpath, './build'); module.exports = { devtool: 'source-map', context: path.resolve(__dirname, '..'), entry: './app/index.js', module: { loaders: [ { test: /\.js?$/, loaders: ['babel'], include: app_dir }, { test: /\.scss$/, include: app_dir, loader: 'style!css?modules&importloaders=2&sourcemap&localidentname=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputstyle=expanded&sourcemap' }, { test: /\.css$/, include: app_dir, loader: "style!css!autoprefixer?browsers=last 2 version!" }, {test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img']}, {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"}, {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}] }, output: { path: assetspath, filename: 'app.js', publicpath: '/build/' }, plugins: [ new cleanplugin([assetspath], { root: projectrootpath }), new extracttextplugin('[name]-[chunkhash].css', {allchunks: true}), new webpack.optimize.occurrenceorderplugin(), new webpack.optimize.dedupeplugin(), new webpack.defineplugin({ 'process.env': { 'node_env': json.stringify('production') } }), new webpack.optimize.uglifyjsplugin({ compressor: { warnings: false } }) ], progress: true, resolve: { root: [path.resolve('../app')], extensions: ['', '.jsx', '.js'] }, sassloader: { includepaths: [path.resolve(__dirname, "./app")] } }; i run npm run build. generate file in app directory. when open index.html in browser, page empty. in firefox inspector have comment: react-empty: 1
how can use webpack build project use in browser without server?
i suggest using write-file-webpack-plugin write bundled contents disk , should able open index.html in browser , start using app without server.
but remember if have used browserhistory 'react-router' wouldn't work without configuring server. have replace hashhistory.
react-router documentation states
hash history uses hash (#) portion of url, creating routes example.com/#/some/path.
hash history works without configuring server, if you're getting started, go ahead , use it. in general, though, production web applications should use browserhistory cleaner urls, , support server-side rendering, impossible hashhistory.
Comments
Post a Comment