Webpack your Chrome DevTools Workspaces

Setup Chrome DevTools Workspace to edit your local files and have them rebuild using webpack watcher.

Example how to

I am using a modified version of

and updated webpack.config.js

to look like

var path = require('path');
var baseDirectory = __dirname; //js
var buildPath = path.resolve(baseDirectory, './build');

module.exports = {
debug: true,
devtool: 'inline-source-map',
context: baseDirectory,
entry: {
example:[
'./example'
]
},
output: {
filename: '[name].entry.js',
chunkFilename: '[name].chunk.js',
path: buildPath,
publicPath: '/build/'
},
resolve: {
modulesDirectories: [
'node_modules'
],
root: [
baseDirectory
],
extensions: ["", ".web.coffee", ".web.js", ".coffee", ".js"],
},
module: {
loaders: [
{ test: /\.coffee$/, loader: "coffee" }
]
}
}

the important line that will get Chrome to see webpack file changes and maintain your breakpoints when the watcher updates the files is

devtool: 'inline-source-map',

Without this line, all your files will look the same to Chrome. This line tells webpack to use base64 encoded data for the sourceMappingURL instead of creating a file that Chrome will not see changes to.


I created place.html in the same directory of webpack.config.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A place for coffee.</title>
</head>
<body>
<script src="build/example.entry.js"></script>
</body>
</html>

to demo the watcher updates and added to the package.json scripts hash

"watch": "./bin/webpack.js --watch --config examples/coffee-script/webpack.config.js --progress --verbose"

to use

npm run watch

now I open places.html using a localhost server.

from the DevTools Source panel

Navigate to the folder that has your sources
Allow DevTools to see your file system

And go to DevTools Settings

Go to Workspace

where the first line:

URL Prefix: http://localhost:63342/webpack/examples/coffee-script/build/ 
(subject to your localhost server setup) 
folder path: /build/ 
(must match where the entry point and chunks are created or it can’t find the webpack made files that have the inline source map).

The second line should be 
URL Prefix: webpack:///./
folder path: /
(this is where your source files live)

Now for the moment of truth.

Set a breakpoint on

module.exports = 42

and refresh the page to stop there.

“yeah coffee-script” was console.logged. Lets change that, along with the exports value.

You can see the watcher updates from the command line


The main things to remember are:

devtool: ‘inline-source-map’,

or else Chrome wont see your file changes

  • Use
webpack --watch

for rebuilding the file changes

  • Map your Chrome DevTools Workspace to the directory with your webpack build files and your source directory to webpack:///./