Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webpack-isomorphic-tools v2 #463

Merged
merged 1 commit into from Nov 1, 2015
Merged

webpack-isomorphic-tools v2 #463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Expand Up @@ -2,5 +2,6 @@
node_modules/
dist/
*.iml
webpack-assets.json
webpack-stats.json
npm-debug.log
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -80,7 +80,7 @@ The primary section of `server.js` generates an HTML page with the contents retu

Then we perform [server-side data fetching](#server-side-data-fetching), wait for the data to be loaded, and render the page with the now-fully-loaded `redux` state.

The last interesting bit of the main routing section of `server.js` is that we swap in the hashed script and css from the `webpack-stats.json` that the Webpack Dev Server – or the Webpack build process on production – has spit out on its last run. You won't have to deal with `webpack-stats.json` manually because [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) take care of that.
The last interesting bit of the main routing section of `server.js` is that we swap in the hashed script and css from the `webpack-assets.json` that the Webpack Dev Server – or the Webpack build process on production – has spit out on its last run. You won't have to deal with `webpack-assets.json` manually because [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) take care of that.

We also spit out the `redux` state into a global `window.__data` variable in the webpage to be loaded by the client-side `redux` code.

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -113,7 +113,7 @@
"socket.io-client": "1.3.7",
"superagent": "1.4.0",
"url-loader": "0.5.6",
"webpack-isomorphic-tools": "2.0.1"
"webpack-isomorphic-tools": "2.1.2"
},
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
Expand Down
6 changes: 6 additions & 0 deletions src/helpers/Html.js
View file
Open in desktop
Expand Up @@ -35,6 +35,12 @@ export default class Html extends Component {
<link href={assets.styles[style]} key={key} media="screen, projection"
rel="stylesheet" type="text/css" charSet="UTF-8"/>
)}

{/* (will be present only in development mode) */}
{/* outputs a <style/> tag with all bootstrap styles + App.scss + it could be CurrentPage.scss. */}
{/* can smoothen the initial style flash (flicker) on page load in development mode. */}
{/* ideally one could also include here the style for the current page (Home.scss, About.scss, etc) */}
{ Object.keys(assets.styles).length === 0 ? <style dangerouslySetInnerHTML={{__html: require('../theme/bootstrap.config.js') + require('../containers/App/App.scss')._style}}/> : null }
</head>
<body>
<div id="content" dangerouslySetInnerHTML={{__html: content}}/>
Expand Down
90 changes: 67 additions & 23 deletions webpack/webpack-isomorphic-tools.js
View file
Open in desktop
Expand Up @@ -3,7 +3,14 @@ var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
// see this link for more info on what all of this means
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
module.exports = {
webpack_assets_file_path: 'webpack-stats.json',

// when adding "js" extension to asset types
// and then enabling debug mode, it may cause a weird error:
//
// [0] npm run start-prod exited with code 1
// Sending SIGTERM to other processes..
//
// debug: true,

assets: {
images: {
Expand All @@ -15,38 +22,75 @@ module.exports = {
],
parser: WebpackIsomorphicToolsPlugin.url_loader_parser
},
fonts: {
extensions: [
'woff',
'woff2',
'ttf',
'eot'
],
parser: WebpackIsomorphicToolsPlugin.url_loader_parser
},
svg: {
extension: 'svg',
parser: WebpackIsomorphicToolsPlugin.url_loader_parser
},
// this whole "bootstrap" asset type is only used once in development mode.
// the only place it's used is the Html.js file
// where a <style/> tag is created with the contents of the
// './src/theme/bootstrap.config.js' file.
// (the aforementioned <style/> tag can reduce the white flash
// when refreshing page in development mode)
//
// hooking into 'js' extension require()s isn't the best solution
// and I'm leaving this comment here in case anyone finds a better idea.
bootstrap: {
extension: 'js',
include: ['./src/theme/bootstrap.config.js'],
filter: function(module, regex, options, log) {
function is_bootstrap_style(name) {
return name.indexOf('./src/theme/bootstrap.config.js') >= 0;
}
if (options.development) {
return is_bootstrap_style(module.name) && WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log);
}
// no need for it in production mode
},
// in development mode there's webpack "style-loader",
// so the module.name is not equal to module.name
path: WebpackIsomorphicToolsPlugin.style_loader_path_extractor,
parser: WebpackIsomorphicToolsPlugin.css_loader_parser
},
style_modules: {
extensions: ['less','scss'],
filter: function(m, regex, options, log) {
if (!options.development) {
return regex.test(m.name);
filter: function(module, regex, options, log) {
if (options.development) {
// in development mode there's webpack "style-loader",
// so the module.name is not equal to module.name
return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log);
} else {
// in production mode there's no webpack "style-loader",
// so the module.name will be equal to the asset path
return regex.test(module.name);
}
//filter by modules with '.scss' inside name string, that also have name and moduleName that end with 'ss'(allows for css, less, sass, and scss extensions)
//this ensures that the proper scss module is returned, so that namePrefix variable is no longer needed
return (regex.test(m.name) && m.name.slice(-2) === 'ss' && m.reasons[0].moduleName.slice(-2) === 'ss');
},
naming: function(m, options, log) {
//find index of '/src' inside the module name, slice it and resolve path
var srcIndex = m.name.indexOf('/src');
var name = '.' + m.name.slice(srcIndex);
if (name) {
// Resolve the e.g.: "C:\" issue on windows
const i = name.indexOf(':');
if (i >= 0) {
name = name.slice(i + 1);
}
path: function(module, options, log) {
if (options.development) {
// in development mode there's webpack "style-loader",
// so the module.name is not equal to module.name
return WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module, options, log);
} else {
// in production mode there's no webpack "style-loader",
// so the module.name will be equal to the asset path
return module.name;
}
return name;
},
parser: function(m, options, log) {
if (m.source) {
var regex = options.development ? /exports\.locals = ((.|\n)+);/ : /module\.exports = ((.|\n)+);/;
var match = m.source.match(regex);
return match ? JSON.parse(match[1]) : {};
parser: function(module, options, log) {
if (options.development) {
return WebpackIsomorphicToolsPlugin.css_modules_loader_parser(module, options, log);
} else {
// in production mode there's Extract Text Loader which extracts CSS text away
return module.source;
}
}
}
Expand Down