让我们一起构建一个小的app
为了便于你更好的了解Webpack带来的好处，我们将会构建一个非常小的app并将资源文件打包。在这个教程中我推荐基于Node4或Node5和NPM3来进行开发，这样就避免在使用Webpack工作的过程中出现一系列头疼的问题。如果你使用的不是NPM3,你可以通过 npm install npm@3 -g 命令来安装它。
$ node --version

v5.7.1

$ npm --version

3.6.
基础的引导
让我们开始创建我们的项目并安装Webpack，我们也会拉取jQuery稍后做展示用。
$ npm init -y

$ npm install jquery --save

$ npm install webpack --save-dev
现在让我们创建app的入口文件，用ES5的语法：
src/index.js
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

附上项目结构







												


											
webpack 环境搭建+实现热更新的更多相关文章
	

    
								
  1. vue开发环境搭建及热更新
		
    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
    
		
    2. 
						
  2. Vuejs开发环境搭建及热更新
		
    一.安装NPM 1.1最新稳定版本: npm install vue 二.命令行工具安装 国内速度慢,使用淘宝镜像: npm install -g cnpm --registry=https://re ...
    
		
    3. 
						
  3. 搭建带热更新功能的本地开发node server
		
    引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...
    
		
    4. 
						
  4. Spring Boot 利用 nginx 实现生产环境的伪热更新
		
    当我们在服务器部署Java程序,特别是使用了 Spring Boot 生成单一 Jar 文件部署的时候,单一文件为我们开发单来的极大的便利性,保障程序的完整性.但同时对我们修改程序中的任何一处都带来重 ...
    
		
    5. 
						
  5. webpack 环境搭建
		
    Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...
    
		
    6. 
						
  6. TypeScript + Webpack 环境搭建
		
    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...
    
		
    7. 
						
  7. webpack环境搭建
		
    环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...
    
		
    8. 
						
  8. react+es6+webpack环境搭建以及项目入门
		
    前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...
    
		
    9. 
						
  9. webpack环境搭建开发环境，JavaScript面向对象的详解，UML类图的使用
		
    PS:因为所有的设计模式都是基于面向对象来完成的,所以在讲解设计模式之前先来过一下面向对象都有哪些知识点 搭建开发环境 初始化npm环境 下载安装nodejs安装即可,nodejs自带npm管理包,然 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 结合源码看nginx-1.4.0之nginx内存管理详解
			
    目录 0. 摘要 1. nginx内存结构设计 2. nginx内存数据结构 3. nginx内存管理原理 4. 一个简单的内存模型 5. 小结 6. 参考资料 0. 摘要 内存管理,是指软件运行时对 ...
    
			
    2. 
						
  2. ecshop分类页把分类描述改成FCKeditor编辑器
			
    最近放一个网站 http://www.macklin.cn/productline/35 有个产品分类页面需要添加分类缩略图和图文的描述 一.首先说下添加分类缩略图的步骤吧 1,依葫芦画瓢,参照的是e ...
    
			
    3. 
						
  3. Android的bitmap和优化
			
    内存管理是个永恒的话题! 内存溢出:就是分配的内存不足以放下数据项序列.如在一个域中输入的数据超过了它的要求就会引发数据溢出问题,多余的数据就可以作为指令在计算机上运行.就是你要求分配的内存超出了系统 ...
    
			
    4. 
						
  4. easyui常用控件及参数说明
			
    CSS类定义: div easyui-window                               window窗口样式 属性如下: 1)       modal:是否生成模态窗口.tru ...
    
			
    5. 
						
  5. VC++堆栈大小设置
			
    VC++堆栈默认大小是1M,如果你分配大于1M的堆,一般会出异常,这里你要把堆调大些,下面是VC++6.0与VC++2010的设置方法 VC++6.0: 工程==>设置==>“连接”界面, ...
    
			
    6. 
						
  6. 最新电脑公司最新GHOST WIN7系统32,64位极速安全版
			
    系统来自系统妈:http://www.xitongma.com 电脑公司最新GHOST win7系统64位极速安全版 V2016年3月 系统简介 电脑公司ghost win7系统64位极速安全版集成了 ...
    
			
    7. 
						
  7. python 列表 字典转json
			
    一.Dictionary 转为JSON 将dict转为JSON,这里利用包json import jsonaItem = {}aItem["id"] = "2203&qu ...
    
			
    8. 
						
  8. 什么是redis的持久化？
			
    什么是redis的持久化? RDB 持久化:该机制可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AOF 持久化:记录服务器执行的所有写操作命令,并在服 ...
    
			
    9. 
						
  9. 基于Nodejs的爬虫
			
    简介 基于 Node.JS 爬取 博客园 1W+博文,对博文内容做关键词提取,生成词云. 演示 安装 安装 git.Node.JS.MongoDB.Yarn 克隆代码 git clone git@gi ...
    
			
    10. 
						
  10. lua 分割字符串
			
    -- 参数:待分割的字符串,分割字符 -- 返回:子串表.(含有空串) function split(str, split_char) local sub_str_tab = {} while tru ...
    
			
    11.