russellf9 / webpack-test Goto Github PK

I'm attempting to learn Angular and am about to start using Webpack, rather than using a seed I thought I should run through the basics of Webpack so I'll understand it better.

"webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules."

It handles the most common module styles: CommonJs and AMD.

This is has been quite a messy experimental repo, ideally I will create a further project with a more methodical order.

Possible steps:

1. Simple js app in 1 folder
2. App with folder structure
3. Build using CLI
4. Add NPM task
5. run using web pack server
6. split configuration (see developing_with_webpack )
7. Use Hot Module Replacement (HMR)
8. Add source maps
9. Add typescript
10. Add profiler
11. Add SASS

$ webpack ./entry.js bundle.js

With CSS Binding

webpack ./entry.js bundle.js --module-bind 'css=style!css'

With Config

# Basic
$ webpack

# With colors and a progress bar
$ webpack --progress --colors

# Watch mode
$ webpack --progress --colors --watch

With Server

$ webpack-dev-server --progress --colors

# Run from
# http://localhost:8080/webpack-dev-server/bundle

Or via NPM

$ npm run go

I had real issues with this module, the webpack-dev-server was not running correctly. The build was providing me with an error

ERROR in /Users/factornine/localhosts/www.factornine.co.uk/development/webpack-test/node_modules/angular2/src/facade/promise.d.ts
(1,10): error TS2661: Cannot re-export name that is not defined in the module.

I simple upgraded by:

npm i typescript@next -D

I've used quite a few plugins and dependancies, I'll list a few here:

• npm-install-webpack-plugin

ts-loader: Using [email protected] and /Users/factornine/localhosts/www.factornine.co.uk/development/webpack-test/tsconfig.json
Hash: 6ceb2fc32b93d6dfa9c6
Version: webpack 1.13.0
Time: 6238ms
    Asset     Size  Chunks             Chunk Names
bundle.js  4.09 MB       0  [emitted]  main
    + 218 hidden modules

ERROR in /Users/factornine/localhosts/www.factornine.co.uk/development/webpack-test/node_modules/angular2/src/facade/promise.d.ts
(1,10): error TS2661: Cannot export 'Promise'. Only local declarations can be exported from a module.

This was the best guide: developing_with_webpack

Getting Started

TypeScript and webpack

Smarter CSS builds with Webpack

faster-sass-builds-with-webpack

github.com/jtangelder/sass-loader

angular2-webpack-starter

Using node more SO

For SASS [introduction-to-webpack-with-practical-examples])http://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/)

es6

Modulization-and-Bundling-with-TypeScript-and-Webpack-for-JS-Full-Stack-Project/

Angular 1

Quickstart to Webkit

ng2-webpack-play

I was having a real issue with the typescript hot loading working

Using npm run start

Working with React - Hot loading React Components in TypeScript

Issue webpack/webpack-dev-server#24

angular2-hmr Used in the ng seed bit I couldn't find put how to get this working.