Develop Reference

Using webpack and publicPath for static resources

The following question was rewritten, because I have now a working solution, but no answer to the question above.
The repository that shows different scenarios how to use resources packed with webpack is named example-webpack-dynamic-resources. It contains 3 modules:
inline: a solution, but not useful in my context (many resource files)
file: a solution by using the plugin webpack-require-from
public-path: no solution yet, shows how I would like to use __webpack?public_path__.
I think I have read any resource about webpack and publicPath and __webpack_public_path__, but I don't get it to work. I try to dynamically change the path to static resources, but it fails.
Here is my context:
I build a Javascript library that will be used on web pages (HTML, CSS, Javascript).
It provides a lot (>100) static resources to small image files, combined > 500 KB. Only a fraction of it will be used by the user looking at the web site.
Therefore I would like to pack the CSS into the bundle, but keep the image resources in a directory located on the server somewhere. The default path to it will be /img.
As long as I use the same structure (which means, images only under ROOT/img/**, everything is ok.
But the users of the library should be able to configure the path to the image resources on their will.
You will find all relevant files in my example repository example-webpack-dynamic-resources in the module public-path-resources.
webpack.js: Use file-loader for images, which are referenced in CSS files. CSS will be inlined by style-loader and css-loader.
src/public-path.js: Define the global variable with a default (no environment variable).
src/index.js: require first public-path, then the logic.
examples/exam1-root/index.html: Tries to use the assets in the sub directory lib, sets the value therefore to __webpack_public_path__ = '/lib/. Not working.
examples/exam2-different-dirs/index.html: Moves the library to a different dir (not relevant), but uses the originally defined directory pgnv-assets for the assets. Working.
examples/exam3-non-standard-dirs/index.html: Try to use instead my-assets as directory for the assets. Not working.
How could the __webpack_public_path__ defined at runtime in the index.html file?

Not found .map extension from node_modules in rails app

I try to integrate angular to rails app. I extended assets folder by
config.assets.paths << Rails.root.join('node_modules')
and it's good work but my console has serveral messages error
http://localhost:3000/assets/rxjs/Subject.js.map
Rails app couldn't .map extension how to load it

Those are "javascript source map" files. If your Subject.js javascript file has been minimized/uglified, then you can generate and add a "map" file to let browsers know how to "unminimize"/"unuglify" your js file.
If the Subject.js file is written by you, then I guess your environment setup with different node.js and gulp.js modules has it enabled. Make sure those files are copied to your /assets folder as well.
Alternatively, you can disable them by removing special comment at the end of your javascript file:
//# sourceMappingURL=/assets/rxjs/Subject.js.map
Or, less likely, your server might be sending X-SourceMap header.

Configure webpack to allow browser debugging

I am new to webpack and I am converting an existing web application to use it.
I am using webpack to bundle and minify my JS which is great when deployed, however this makes it very challenging to debug while in developement.
Typically I use chrome's built in debugger to debug JS issues. (Or Firebug on firefox). However with webpack everything is stuffed in one file and it becomes challenging to debug using that mechanism.
Is there a way to quickly turn on and off bundeling? or turn on and off minifying?
I have looked to see if there is some script loader configuration or other setting but it does not appear ovious.
I have not yet had the time to convert everything to act like a module and use requires. So I simply use require("script!./file.js") pattern for my loading.

You can use source maps to preserve the mapping between your source code and the bundled/minified one.
Webpack provides the devtool option to enhance debugging in the developer tool just creating a source map of the bundled file for you. This option can be used from the command line or used in your webpack.config.js configuration file.
Below you can find a contrived example using the command line to generate the bundled file (bundle.js) along with the generated source map file (bundle.js.map).
$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1.74 kB 0 [emitted] main
bundle.js.map 1.89 kB 0 [emitted] main
[0] ./entry.js 85 bytes {0} [built]
[1] ./hello.js 59 bytes {0} [built]
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
entry.js
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
hello.js
module.exports = function () {
return 'Hello world!';
};
If you open index.html in your browser (I use Chrome but I think it is also supported in other browsers), you will see in the tab Sources that you have the bundled file under the file:// scheme and the source files under the special webpack:// scheme.
And yes, you can start debugging as if you had the original source code! Try to put a breakpoint in one line and refresh the page.

I think its better to setup your project using production and development mode
https://webpack.js.org/guides/production/
Its also include how to map your code to debug
devtool: 'inline-source-map'

Source maps are very useful as already pointed out.
But sometimes selecting which source map to use could be a pain.
This comment on one of the Webpack source map issue might be helpful for selecting which source map to use based on requirements.

Chrome also has a format option in the debugger. It doesn't have all the information a normal source file would but it's a great start, also you can set breakpoints. The button you click is on the bottom left of the first screen shot, looks like {}.
Before formatting:
After formatting.

Have a look Here
its a beautifier that deminifies javascript. at the bottom, it has a list of various plugins and extensions for browsers, check them out.
you might be interested in FireFox Deminifier , its supposed to deminify and style your javascript when its retrieved from the server.
(source: mozilla.net)

AJAX Built and Deployment Environment especially javascript and css min, full versions

Currently I have one QA server to run on, svn update can be run there to test the code that everyone commits to subversion.
The issue I have seen with more and more javascript and css that the min or full version that get compiled, eg:
Build tool: Jake
JS compressor: UglifyJS
CSS optimizer: CSSO
either have to manually be updated/compiled just before promotion to production servers or we just have the min/full version on our svn but that would be not so great.
The way I see an approach would be:
* keep the full/split css java script files outside of the path where web served content sits, subversion or trac builds the min/full version on submit/trigger.
Has anyone further automated this process?
How do you separate your full source/full version/min version as not to mess up final deployment? When do you compile the min version?
Only at the last step before going to production?
Where do you leave the original source, it cannot live right next to the web served other files, in my example php files?

Just been dealing with something similar myself. If I understand your question correctly you're looking to have unminified files in a local or dev environment but have them minified upon deployment. There are, of course, many different ways that you can go about this, and we're currently working on a better solution but I'll give you an example of a project I just finished up...
Uses symfony 1.4, YUI Compressor, and git.
I have a symfony task (php cli script) set up to run YUI Compressor on a given list of css and js files, which get dumped into min.css and min.js in the appropriate directories. The script simply dumps all of the contents of the listed files into one big file and minifies them. Then symfony is set to only use min.js. Of course, debugging minified files can be a pain, so another option is to skip minifying on your local or dev boxes and just keep them as a combined file. Personally I have it minifying anyway because Chrome's "Pretty print" option works well enough for me most of the time, although it's not 'ideal'.
I've created a local post-commit and server side post-merge script for git that simply runs the symfony task so the files are automatically updated whenever you commit locally or do a git pull on the server, so any changes made inside the js/css files are updated when committing. The only pain point of this is having to manually run the minify script whenever you've updated locally but haven't yet committed.
An alternative to keep unminified code on local/dev would require some more coding so that it is environment specific, which is certainly doable but I've just been lazy with it thus far as this works well enough for now :)

I have taken the following convention-based approach and it works well for me for traditional web-development as well as for mobile apps and offline HTML5 mobile apps.
Conventions
All non-minified/full-version js/css scripts are named with .debug.js or .debug.css extensions.
Example: global.debug.js and global.debug.css
All references to js/css in html reference non-debug versions: global.js or global.css
Process
I use a custom MSBuild task to minify js (using AjaxMin, but you could use YUI Compressor or others) to the following naming convention *.release.js or *.release.css
(Example: global.release.js).
After minification into the *.release.js files. I have one more MSBuild task that calls a simple batch file (JS.bat) that accepts the current Configuration (Debug or Release) and copies either the debug (full-source version) or the release (minified) version to the normal destination.
Here's the sample MSBuild tasks I add to my project file to accomplish the minification and call to my batch file:
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<DebugJS Include="**\*.debug.js" />
</ItemGroup>
<AjaxMin SourceFiles="#(DebugJS)" SourceExtensionPattern="\.debug.js$" TargetExtension=".release.js" />
<Exec Command="JS.bat $(Configuration)" />
</Target>
For example, assuming:
I'm in Debug mode
and I have a global.debug.js file (full-source version that I work in)
When I build my project, global.debug.js get's minified into global.release.js
Since I'm in the Debug mode configuration, global.debug.js will get copied to global.js (which is what my html references) and, therefore, I'll have the full-source version when debugging
If I switch to Release mode configuration, then global.release.js (the minified version) gets copied to global.js and this is what I would want for release/deployment to production.
Here's the simple batch script (JS.bat) that I use to handle the copy of the Debug or Release script based on the passed argument:
#Echo off
REM ----------------------------------------------------------------------------------------
REM <summary>
REM Script used to copy the Debug (or Release) javascript files to the runtime location
REM </summary>
REM <history>
REM <change date="9/22/2010" author="Adam Anderly">Created</change>
REM </history>
REM ----------------------------------------------------------------------------------------
REM Grab the first argument as variable Config (Debug/Release)
SET Config=%~1
REM The loop below is used to get the Length of the Config variable
REM The Length variable is then used in the substring function on Line 22
for /f "tokens=1 delims=:" %%a in (
'^(echo."%Config%"^& echo.!##^)^|findstr /O /C:"!##" '
) do set /a Length=%%a-5 + 4
FOR /R %%i IN (*.%Config%.js) DO CALL :REN "%%i"
GOTO :END
:REN
SET File=%~f1
REM Set File2 variable to the runtime filename (minus .debug or .release)
CALL SET File2=%%File:~0,-%Length%%%.js
REM First make sure the destination file is not read-only
IF EXIST "%File2%" ATTRIB /S -R "%File2%"
REM Finally, we copy the current debug|release file to the runtime file
COPY /Y "%File%" "%File2%"
:END
The batch script above works recursively so you can have nested folders of js or css and it still works.
While I'm using MSBuild, you could certainly incorporate this batch file into your process using a different build tool (previously I did the same using NAnt).
Hope that helps!
Adam

Does Google Closure support multiple "packages" of Javascript files?

Say I had 1 MB of compressed Javascript, all combined into one file using Google Closure.
Now 500 KB of it is only needed for one section of the site.
So I want to combine & compress the Javascript, but separate it into two packages:
Package A - 500 KB - used across the site
Package B - 500 KB - used only in one section of the site
At the moment I'm just putting a comment at the top of the Javascript files like this:
/// <package name="Main" />
And using my own custom .NET application to parse them and put them in the appropriate package.
Is it possible to do all of this with Google Closure? I'd rather use an existing solution than re-invent the wheel.

wrong closure compiler does have option to compress files into multiple files
for example:
java -jar compiler.jar \
--module mod1 --js src1.js --js src2.js \
--module mod2:mod1 --js src3.js

After further investigation, it looks like Closure doesn't have such a feature.
I'm going to build the feature into my own custom JS combiner, which I might open source when I have the time.