Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 64d6306

Browse files
Added notes for Webpack, created Webpack config, and modified existing
configuration to use Webpack
1 parent a0da527 commit 64d6306

File tree

6 files changed

+84
-5
lines changed

6 files changed

+84
-5
lines changed

‎README.md

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -329,8 +329,6 @@ Change "prestart" script to use babel-node
329329

330330
`babel-node buildScripts/startMessage.js`
331331

332-
333-
334332
## Module #7: Bundling
335333

336334
#### Why use bundling?
@@ -341,7 +339,7 @@ Change "prestart" script to use babel-node
341339

342340
#### Module Formats
343341

344-
- Old Module Formats
342+
- *Old Module Formats*
345343

346344
- ##### IIFE (Immediately Invoked Function Expressions)
347345

@@ -365,7 +363,7 @@ Change "prestart" script to use babel-node
365363

366364
#### Selecting a Bundler
367365

368-
- OLD Bundler
366+
- *OLD Bundler*
369367

370368
- ##### Require.JS
371369

@@ -413,7 +411,42 @@ Change "prestart" script to use babel-node
413411
- Webpack 2 soon --> tree shaking coming
414412

415413

414+
##### Using Webpack
415+
416+
1. Create a couple of basic files to use with Webpack, `index.js` and `index.css` in the src folder
417+
1. In index.js we do the following
418+
1. use a Node package called numeral
419+
2. import our `index.css` file
420+
2. Create a basic Webpack configuration file in the project root called `webpack.config.dev.js` (see project for contents)
421+
1. Within the configuration, we output our bundled JavaScript in a single file called `bundle.js`
422+
3. Update Express webserver (srcServer.js) to use Webpack:
423+
424+
```javascript
425+
import webpack from 'webpack';
426+
import config from '.../webpack.config.dev'
427+
428+
...
429+
430+
const compiler = webpack(config);
431+
432+
app.use(require('webpack-dev-middleware')(compiler, {
433+
noInfo: true,
434+
publicPath: config.output.publicPath
435+
}));
436+
437+
...
438+
```
439+
3. Update index.html to reference `bundle.js` generated by Webpack
440+
441+
4. Note in browser when the application is run, bundle.js shows as the JavaScript file included by the page. In addition, because Webpack is configured to include our stylesheet, we find the css styles we defined in index.css embedded in the bundle.js file.
442+
443+
444+
#### Sourcemaps
445+
446+
447+
448+
416449

417450
## Bibliography
418451

419-
The Checklist Manifesto by Atul Gawande
452+
The Checklist Manifesto by Atul Gawande

‎buildScripts/srcServer.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import express from 'express';
22
import path from 'path';
33
import open from 'open';
4+
import webpack from 'webpack';
5+
6+
import config from '../webpack.config.dev'
47

58
const app = express();
9+
const compiler = webpack(config);
10+
11+
app.use(require('webpack-dev-middleware')(compiler, {
12+
noInfo: true,
13+
publicPath: config.output.publicPath
14+
}))
615

716
app.get('/', function(req, res) {
817
res.sendFile(path.join(__dirname, '../src/index.html'));

‎src/index.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
body {
2+
font-family: sans-serif;
3+
}
4+
5+
table th {
6+
padding: 5px;
7+
}

‎src/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
</head>
66
<body>
77
<h1>Hello World!!!</h1>
8+
<script src="bundle.js"></script>
89
</body>
910
</html>

‎src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import './index.css';
2+
import numeral from 'numeral';
3+
4+
const courseValue = numeral(1000).format('0,0ドル.00');
5+
6+
console.log(`I would pay ${courseValue} for this awesome course!`);

‎webpack.config.dev.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import path from 'path';
2+
3+
export default {
4+
debug: true,
5+
devtool: 'inline-source-map',
6+
noInfo: false,
7+
entry: [
8+
path.resolve(__dirname, 'src/index')
9+
],
10+
target: 'web',
11+
output: {
12+
path: path.resolve(__dirname, 'src'),
13+
publicPath: '/',
14+
filename: 'bundle.js'
15+
},
16+
plugins: [],
17+
module: {
18+
loaders: [
19+
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
20+
{ test: /\.css$/, loaders: ['style', 'css'] }
21+
]
22+
}
23+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /