$ node --version
v5.7.1
$ npm --version
3.6.
$ 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.
Time: 301ms
Asset Size Chunks Chunk Names
bundle.js kB [emitted] main
[] ./src/index.js bytes {} [built]
+ hidden modules
这里你可以看到Webpack告诉你bundle.js包含了你的入口文件(index.js)以及有一个隐藏模块。这个隐藏模块就是jQuery,Webpack默认隐藏不是你的模块。为了查看所有被Webpack编译之后隐藏的模块，我们可以加上 --display-modules标记：
$ webpack --display-modules
bundle.js kB [emitted] main
[] ./src/index.js bytes {} [built]
[] ./~/jquery/dist/jquery.js kB {} [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
附上项目结构