survivejs / webpack-book Goto Github PK
View Code? Open in Web Editor NEWFrom apprentice to master (CC BY-NC-ND)
Home Page: https://survivejs.com/webpack/
From apprentice to master (CC BY-NC-ND)
Home Page: https://survivejs.com/webpack/
To trigger auto refresh of the browser, you need to add a script in build/index.html:
<script src="http://localhost:8080/webpack-dev-server.js"></script>--profile
--progress --profile --colors --display-modules
https://christianalfoni.github.io/react-webpack-cookbook/Configuring-react-js.html
I tried to make a screenshot but for some reason it's not working. In the Using "React JS in the code" it says "In any file" but I think the react code should be saved in the component.js file.
Thanks for making this tutorial btw, this is just what I wanted.
Have to finish to section
https://github.com/webpack/file-loader is mentioned as a loader that can automatically update your index.html with the new hash
Hi there I have been following this cookbook, I know babel-loader is used for parsing jsx but in section 3.1 Loading CSS, on the the webpack.config.js loader for jsx is changed to 'jsx' from 'babel', and I get error when running npm run dev. But if i put 'babel', it work fine. Do I need to install jsx-loader but I guess we dont need that as we already have bable-loader doing same thing. Am i missing something or should be it 'babel' instead of 'jsx'. Thanks.
ERROR in ./~/react-dom/index.js
[0] Module not found: Error: Cannot resolve 'file' or 'directory' /home/romseguy/myproject/node_modules/react/dist/react.min.js/lib/ReactDOMClient in /home/romseguy/myproject/discount-ascii-warehouse-0.2.0/node_modules/react-dom
https://christianalfoni.github.io/react-webpack-cookbook/Optimizing-rebundling.html
Is there a way to prevent using the alias over the node_modules directory?
Hello
The package.json snippet is missing in https://github.com/christianalfoni/react-webpack-cookbook/wiki/Running-a-workflow
https://github.com/fakefish/react-webpack-cookbook
this is my forked repo.
The code examples in Basics of JSX are invisible. The code is not formatted or escaped.
https://christianalfoni.github.io/react-webpack-cookbook/Introduction-to-React-JS.html
There seems to be tons of info below question tag. Example: webpack/webpack#739 (reproducible builds). Maybe some of that could be incorporated into the book?
I have yet to see an example that combines...
SEE: 7, 8, 9 https://github.com/petehunt/webpack-howto
Looking into some of your issues/questions/articles and they all point to the same things.
Home/Admin has duplicate code and there is only ever one entry point.
Do you know if this is possible?
Thanks!
Hi,
the following javascript code
import React from 'react';
export default React.createClass({
render: function () {
return React.createElement('h1', null, 'Hello world');
}
});
;
found in https://github.com/christianalfoni/react-webpack-cookbook/wiki/Configuring-react-js
gives me the following error when launching webpack
ERROR in ./app/Component.js
Module parse failed: C:\inetpub\wwwroot\webpack\app\Component.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| export default React.createClass({
@ ./app/main.js 3:16-41
Can you help me?
I'm a noob ;)
Ie. when/how to use publicPath
and so on. Looks like that can be confusing to some. Speaking of output, html-webpack-plugin might deserve a few words.
I just got a tip it should be possible to set up gh-pages to update by subscribing to gollum
webhook.
In our case it would have to trigger npm run gitbook && npm run deploy
.
@christianalfoni Do you have experience with webhooks?
I was reading the cookbook, and just noticed this section.
Unless Webpack is doing something really sneaky here (which I don't think is the case, but do correct me if I'm wrong), these styles will end up being rendered into the page as inline styles on DOM elements.
This is generally poor for application security. Aspects of inline styles can be used in various attacks, including XSS attacks, and it's generally preferable to disable them with a Content Security Policy if possible.
I advise adding a warning to this section to say that it could cause security issues, and that it is not advised to use it in production.
On Automatic-browser-refresh.html, it mentions
We added a script that refreshes the application when a change occurs. You will also need to add an entry point to your configuration:
without specifying the file to be edited.
It would be nice to add this guide: http://gaearon.github.io/react-hot-loader/getstarted/
Adopt code to React 0.14. (separate react-dom module)
https://github.com/webpack/expose-loader
This can be useful with React and Chrome React tools at least.
Hi,
I found your post about multi entry points really useful (https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points).
But in your post about hot loading components (https://github.com/christianalfoni/react-webpack-cookbook/wiki/Hot-loading-components), no more mentions of multi entry points. Would you have an example laying around about this one ? :) Can't find a way to make it work. It seems that my HMR is never triggered.
Thanks !
Tried to combine these two techniques and I ended up in a fiery of flames and agony ;)
A lot of Module not found: Error: Cannot resolve 'file' or 'dictionary C:\foo\bar\node_modules\react\dist\react.min.js/lib/ReactMount in foo.jsx
Just to quote @jeffijoe at Gitter (sample conf):
Loaders:
{
test: /moxie\-plupload/,
loader: 'imports?mOxie=moxie!exports?window.plupload'
}, {
test: /moxie/i,
loader: 'exports?this.mOxie'
}
Alias:
moxie: 'plupload/js/moxie.js',
'moxie-plupload': 'plupload/js/plupload.dev.js',
ProvidePlugin:
mOxie: 'moxie'
Hey @christianalfoni great work with this cookbook, it has been very useful. One thing we could add underneath "Loading LESS or SASS" is the "Loading SVG" page.
I know we have a few ways to achieve this using with svg-loader
but the simple way to do that is through file-loader
.
module: {
loaders: [
...
{
test: /\.svg$/,
loader: "file-loader"
},
...
]
}
Then in your CSS:
.MyIcon {
...
background-image: url(../assets/my-icon.svg);
}
I know I lost a few minutes yesterday looking, it might be useful for someone else as well.
Thoughts?
Cheers
on https://christianalfoni.github.io/react-webpack-cookbook/Automatic-browser-refresh.html
Instead of adding http://localhost:8080/webpack-dev-server.js
to the HTML, you can add webpack-dev-server/client?http://localhost:8080
to the entry
list.
This also makes it easier to disable HMR changes in production builds.
I did some initial stab at the wiki. I guess it can grow from that. Basic structure:
Recipes should go beyond each. One alternative would be to think up a format that allows recipes to be tagged (can belong to multiple). Then you could implement a filtering UI based on that. But that's not needed yet and can be thought about later on.
Hi,
I read this page: https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html
I made some tests, a virtual css style-sheet was appended to <head>
via javascript.
I tested style-loader, css-loader and less-loader chaining style!css!less
and it worked as expected.
Wow...
But I have a lot of questions flying in my head... I really dunno if I want to do this...
If not out of scope, can you add some thoughts about embedding css this way?
Thanks
V
In the sample you have
vendors: ['react']
but no where in that sample page do you define react. On your site you define it as
config.addVendor('react', bower_dir + '/react/react.min.js');
so I expect it to be the same, if so also need to add the addVendor method.
Link http://webpack.github.io/docs/webpack-dev-server.html contains this code
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './app/main.js']
},
...
};
With this message
And make sure you have the special webpack/hot/dev-server entry point in your configuration
This is undocumented. You also use the same chunk in your own examples.
But the funniest thing that official react-starter from webpack does not contain this. And they have both live and hot reload enabled...
Here is their entry (single place in code):
var entry = {
main: options.prerender ? "./config/mainPrerenderer" : "./config/mainApp"
// second: options.prerender ? "./config/secondPrerenderer" : "./config/secondApp"
};
Did you manage to understand what's about this webpack/hot/dev-server line?
What exactly is does? Why everyone uses it except Webpack itself ๐ ?
Artifacts is spelled artefacts on the Introduction to Webpack page.
Hi,
I have been struggling for a bit, trying to optimize my dev environment.
In my package.json I import the following libraries as dependencies:
"react": "0.13.3",
"react-router": "0.13.3"
and taking clues from your Optimizing-development.md
document I end up with this in my deps
array (I also tried just to import React only but also get an error with React Router):
deps= [
'react/dist/react-with-addons.min.js',
'react-router/umd/ReactRouter.min.js'
];
I also tried with and without the following line in my loaders
list:
loaders: [
{test: path.resolve(modulesPath, 'react/dist/react-with-addons.min.js'), loader: 'expose?React'}
]
The problem is that is that I just get errors of this kind (all works well if I don't use aliases):
Uncaught ReferenceError: require is not defined
I understand somewhat that the UMD React Router package does a require('react')
but Webpack require
is not exposed and I have no clue how to even do that at this stage.
Could you point me to the right direction ? My current alternative which not to use any aliases and noParse adds several seconds to rebundling.
Is there an alternative option (and please no Bower) ?
Thanks.
This is something that I struggled with when I first picked up webpack as well, since I wanted my production and development scripts to be as similar as possible.
Currently I use a custom plugin that will receive the stats object, extract the JS and CSS list, and pass it to an Html.jsx
file.
I recently found html-webpack-plugin, but haven't tried it.
Apparently something like @import "~theo?less!./file.json"
should work within LESS files. The idea here is that ./file/json
gets processed by a tool known as theo. After processing it is something less
loader can take care of.
Hi
In my main.s js I am using the import syntax
import './Component.jsx';
When I run 'npm run dev' I get the following error:
ERROR in ./app/main.js
Module parse failed: /Users/aoshi_1/Desktop/test_webpack/app/main.js Line 2: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| 'use strict';
| import './Component.jsx';
|
|
This is my config setup
var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx$/, // A regexp to test the require path
loader: 'jsx' // The module to load. "jsx" is short for "jsx-loader"
}]
}
};
module.exports = config;
thanks
hey, it seems absolute import doesnt work for me. what happens is that webpack translates the require('/whatever') to a url, and my server tries to load it, instead of webpack importing it.
https://github.com/christianalfoni/react-webpack-cookbook/wiki/Requiring-files
entry: [
'./client/scripts/index.js',
'webpack-hot-middleware/client',
],
Just opening this so we can track the status of migration:
<meta http-equiv="refresh" content="0; url=http://example.com/" />
./webpack_cookbook
and pages below that.@christianalfoni Sounds good?
Hi,
If I setup the recommended alias for react in dev mode all works fine except any warning you may receive prom react propTypes do no occur.
For example I had this for an ImageItem component:
ImageItem.propTypes = {
src: React.PropTypes.string.isRequired
};
and purposely used this: (no props)
With the alias in place it all works fine but you get no warnings.
When I remove the alias I get the expected warning:
Warning: Failed propType: Required prop src
was not specified in ImageItem
. Check the render method of Root
.
I thought I'd just mention this because if using the minified version suppresses warnings it kinda defeats the purpose since you want to see these things in dev mode.
Cheers
Hi,
thanks for the cookbook !
I have an issue with the receipt spliting app and vendor : my vendor.js is way larger than my app.js and so is loaded after the application code, triggering of course a "webpackJsonp is not defined" exception. Is there a Webpack way to deal with this ?
Thanks !
Replace documentation of Hot loading on React Hot Loader with React Transformer HMR since React Hot Loader is depreciated.
https://github.com/gaearon/react-transform-hmr
EX:https://github.com/gaearon/react-transform-boilerplate
BabelJS just launched new major version 6. It makes breaking changes, especially how to compile React and ES6. I was getting this error:
ERROR in ./app/main.jsx
Module build failed: SyntaxError: /home/edward/learn/react-webpack-cookbook/app/main.jsx: Unexpected token (7:17)
5 |
6 | function main() {
> 7 | React.render(<Hello />, document.getElementById('app'));
| ^
8 | }
9 |
I wrote a post in here to solve that: https://edwardsamuel.wordpress.com/2015/11/01/react-syntax-error-unexpected-token/.
https://christianalfoni.github.io/react-webpack-cookbook/Inlining-fonts.html says "Depending on your project you might be able to get away with one font format. If you exclude Opera Mini, all browsers support the .woff and .svg format" but the SVG format is a dead format, and virtually everyone stopped supporting it quite a while ago. Only safari still supports it, but we found really obvious flaws in the SVG format fairly long ago, and it was shelved as "useless compared to real fonts". http://caniuse.com/#search=svg%20font is a good resource to check, here.
Everything does support WOFF though, so at this point (early 2016), with Microsoft having literally abandoned all IE versions that don't support WOFF, you just need one format. (and WOFF2 if you want to be ahead of the curve)
I got this error when use weppack-dev-server for automatically refresh.
Uncaught Error: [HMR] Hot Module Replacement is disabled.
dev in package.json is
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
entry in webpack.config.js is
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'main.js')],
How to deal with that?
Hi there,
You said that change of menu structure would probably break gitbook. I suggested a change now as it felt a bit weird to have those headers as links. There was not really anything to put in there :-)
It would be great, if you agree, to spread some fairy dust on gitbook and make this structure work.
Adding content whenever I get time. Things are starting to come a bit more together now. Looking forward to spreading it like crazy, I think this will be extremely valuable to developers :-)
As a new user one of the biggest challenges I find in using webpack is producing all the permutations of output in a single configuration. It would be great to see an example of a configuration that supports script and npm packaging of a library as is described using Browserify in this blog post:
http://krasimirtsonev.com/blog/article/distributing-react-components-babel-browserify-webpack-uglifyjs
Thanks for this very helpful cookbook.
The first <span>
is not closed correctly.
return <div className='TodoItem'>
<span className='TodoItem-owner'>{owner}<span>
<span className='TodoItem-task'>{task}</span>
<span className='TodoItem-likes'>{likes}</span>
<span className='TodoItem-like' onClick={this.like}>Like</span>
</div>;
found here: http://christianalfoni.github.io/react-webpack-cookbook/Introduction-to-React-JS.html
Bye
V
It might be a good idea to contact some webpack users to figure out common tasks/problems and how they solve them.
Hi. I've read tutorial about spltting code into different chunks and still have some issues. Could you please take a look into my question on Stackoverflow?
I believe this is something that would be of benefit to a lot of people.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.