$ node --version v5.7.1 $ npm --version 3.6.0
$ npm init -y $ npm install jquery --save $ npm install webpack --save-dev
var $ = require('jquery'); $('body').html('Hello');
然后在webpac.config.js文件中创建Webpack配置。Webpack配置就是Javascript，需要导入一个对象。
module.exports = { entry: './src', output: { path: 'builds', filename: 'bundle.js', }, };
entry 告诉Webpack在你的应用中哪些文件是入口文件。这些就是最主要的文件，位于依赖树的最上层。然后我们告诉它编译的打包文件放到builds文件夹下并且命名为bundle.js。让我们来设置相应的index.html页面：
<!DOCTYPE html> <html> <head></head> <body> <h1>My title</h1> <a>Click me</a> <script src="builds/bundle.js"></script> </body> </html>
我们来运行Webpack命令，我们得到了一些信息，它告诉我们bundle.js编译正确：
$ webpack Hash: d41fc61f5b9d72c13744 Version: webpack 1.12.14 Time: 301ms Asset Size Chunks Chunk Names bundle.js 268 kB 0 [emitted] main [0] ./src/index.js 53 bytes {0} [built] + 1 hidden modules
这里你可以看到Webpack告诉你bundle.js包含了你的入口文件(index.js)以及有一个隐藏模块。这个隐藏模块就是jQuery,Webpack默认隐藏不是你的模块。为了查看所有被Webpack编译之后隐藏的模块，我们可以加上 --display-modules标记：
$ webpack --display-modules bundle.js 268 kB 0 [emitted] main [0] ./src/index.js 53 bytes {0} [built] [1] ./~/jquery/dist/jquery.js 259 kB {0} [built]
热更新---------------->这里我走了很多弯路，感谢网友的解决方案，访问路径：http://blog.csdn.net/qq_16559905/article/details/54177581
操作步骤：
1、安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下：
（1）npm config set registry "http://registry.npm.taobao.org" （2）npm config list 可以查看配置
2.安装完nodejs之后,打开终端,执行命令:
(1)npm install webpack -g //-g的意思是安装全局的webpack,但是我们实际的开发中还需要针对单个的项目进行webpack安装,执行命令:
3、使用 npm init 初始化，生成 package.json 文件：执行命令:
1. npm init 自定义创建package.json
2. npm init -yes 可以创建默认的package.json
现在我们的项目已经创建好了,接下来我们来添加依赖包及插件
（1） 局部安装Webpack,执行命令：
npm install webpack --save-dev
（2）安装React,–save 命令用于将包添加至 package.json 文件,执行命令：
npm install react react-dom react-router react-hot-loader css-loader jsx-loader html-webpack-plugin --save-dev
（3） 安装babel插件,babel插件是webpack需要的加载器,如果没有这几个加载器我们的jsx语法，和es2015语法就会报错。
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
（4）安装自动刷新热更新服务，安装webpack-dev-server执行命令：
npm install webpack-dev-server --save-dev
（5）在package.json文件中为scripts添加,方便使用开启服务命令:
"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }
package.json全部文件附上：
{ "name": "tdip", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-loader": "^7.1.2", "jquery": "^3.2.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "html-webpack-plugin": "^2.30.1", "jsx-loader": "^0.13.2", "react": "^16.0.0", "react-dom": "^16.0.0", "react-hot-loader": "^1.3.1", "react-router": "^4.2.0", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
安装完命令之后，创建webpack的配置文件：webpack.config.js文件
webpack.config.js文件配置如下：
// module.exports = { // entry: __dirname + '/src', // output: { // path: __dirname + '/builds', // filename: 'bundle.js', // }, // }; var path = require('path'), webpack = require('webpack'), HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: ['webpack/hot/dev-server', __dirname + '/src'], output: { path: __dirname + '/builds', filename: 'bundle.js' }, devServer: { inline: true, port: 8099 }, module: { loaders: [{ test: /.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new webpack.HotModuleReplacementPlugin() ] };
安装完成之后运行命令
1、根目录下执行命令,其中一个：
npm run build 线上目录
npm run dev 开发目2.浏览器直接访问:
http://localhost:8099/index.html
附上项目结构
