This is a step-by-step note of how to set up a webpack project.

setting-up-webpack.md

Note

1. when develop, edit public/index.html:
   • <script src="http://localhost:8080/webpack-dev-server.js"></script>
   • <script src="bundle.js"></script>
2. when build, edit public/index.html:
   • delete: <script src="http://localhost:8080/webpack-dev-server.js"></script>
   • <script src="./dist/bundle.js"></script>
3. Some part of this file need to be updated.

Install nvm

Because node.js is still a pretty young project, it updates frequently, you may need to switch versions during development phase, so it is recommended that install node.js through nvm. Node Version Manager (nvm) is a tool that allows you to manage multiple versions of node.js on the same machine. Each version runs in its own isolated environment, so you can safely switch versions without affecting the whole system.

brew install nvm

nvm ls-remote to browse available versions.
nvm list to list all the version installed so far.

Install node.js

nvm install <version>

Node.js comes with npm (node.js package manager).

Initialize npm and the project

Starting with an empty directory for your project, you are gonna initialize a package.json to handle your package dependencies, and build commands. To do so, type the command and answer the corresponding questions:

npm init

This will create a package.json for you. Don't worry if some fields don't look ok, you can modify those later. Or just follow the snippet below.

{
  "name": "webpack-generator",
  "author": "mavis.jheng",
  "version": "0.0.1",
  "description": "webpack generator template",
  "main": "./js/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {},
  "devDependencies": {}
}

A package.json file contains meta data about your app or module. Most importantly, it includes the list of dependencies. This allows for any body to quickly install all the required packages for your project by just typing npm install.

Install webpack through npm

npm install webpack --save-dev

• --save: Package will appear in your dependencies.
• --save-dev: Package will appear in your devDependencies.
• --save-optional: Package will appear in your optionalDependencies.

After installing the first package by npm, a node_modules folder will be created in your directory containing those dependencies. Following best practices, you’ll want to keep the node_modules folder out of the git repository. You can do that by adding a .gitignore file to your project root.

More about package.json scripts

It can be useful to run build, serve and such commands through npm. That way you don't have to worry about the technology used in the project. You just invoke the commands. This can be achieved easily by setting up a scripts section to package.json.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm js/bundle.js; webpack --progress --colors"
}

• --devtool eval 會顯示出發生錯誤的行數與檔案名稱
• --progress 會顯示出打包的過程
• --colors 會幫 webpack 顯示的訊息加入顏色
• --content-based build 指向專案最終輸出的資料夾

Create webpack.config.js to your project

Let’s start your configuration in webpack.config.js.
The setting of this file can follow these document:

• https://webpack.github.io/docs/configuration.html
• http://christianalfoni.github.io/react-webpack-cookbook/Getting-started.html
• http://survivejs.com/webpack_react/developing_with_webpack/
• https://github.com/webpack/webpack
• http://rhadow.github.io/2015/03/23/webpackIntro/
• http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/

Webpack LiveReload by webpack-dev-server

This will automatically refresh browser while you save changes in your application. And it runs on port 8080.

npm install webpack-dev-server --save-dev

• Add new script to package.json

"dev": "webpack-dev-server --no-info --progress --colors --hot --content-base"

• Add a reference to the webpack-dev-server client script to the index.html

<script src="http://localhost:8080/webpack-dev-server.js"></script>

• Add webpack/hot/dev-server to entry in the webpack.config.js

entry: ['webpack/hot/dev-server', './js/main.js'],

Then go to localhost:8080 to see if it updates browser on changes.

Import/Export modules

Use keyword: require and module.exports

Directory Structure

It is recommended that structure your project like this:

• /css
• /js
  • main.js
  • /components
    • component.js
    • app.js
    • bundle.js (automatically created)
  • /lib
• index.html
• .gitignore
• package.json
• webpack.config.js