让我们一起构建一个小的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. uvm_reg_file——寄存器模型（十四）
			
    有了uvm_reg_field, uvm_reg, uvm_block, 也许我们需要跟大的uvm_file,这就是传说中的寄存器堆. // // CLASS: uvm_reg_file // Reg ...
    
			
    2. 
						
  2. HttpRunner环境搭建
			
    官方文档地址:http://cn.httprunner.org/官方源码地址:https://github.com/HttpRunner/HttpRunner HttpRunner 是一款面向 HTT ...
    
			
    3. 
						
  3. Autoit3脚本编写举例
			
    以任务管理器为例 1.首先打开任务管理器 2.点击结束任务操作 第一步打开任务管理器 run("C:\WINDOWS\system32\taskmgr.exe"); 第二步点击结束 ...
    
			
    4. 
						
  4. HDU - 5491 The Next 2015 ACM/ICPC Asia Regional Hefei Online
			
    从D+1开始,对于一个数x,区间[x,x+lowbit(x))内的数字的二进制位上1的数量整体来说是单调不减的,因此可快速得出1在这个区间的取值范围. 每次判断一下有没有和[s1,s2]有没有交集,一 ...
    
			
    5. 
						
  5. codeforce Gym 100418K 	Cards （概率，数学）
			
    题意:麦田的故事,n张牌,取x张牌,记住前x张牌最大的值m,继续往后取,遇到第一张比m大的牌就停下来.求一个x使得最后的牌在整副牌里是最大的期望最大. 假设最大的牌是A,A在各种位置出现的概率就是相等 ...
    
			
    6. 
						
  6. codeforce Gym 100500I 	Hall of Fame (水)
			
    题意:统计一些串中,字母的出现频率,不分大小写,找出现频率最高5个字符(相同频率优先取字典序大的),把他们的对应的值加起来判断以下是否大于62. 没出现的不算. #include<cstdio& ...
    
			
    7. 
						
  7. CF Gym 100187A Potion of Immortality （思路，最坏情况的最小损失）
			
    根据兔子试药情况可以缩小范围,如果死了,不在试过的药里面,如果活着,在试过的药里. 最糟的情况: 两个原则 1.能确定魔药所在的范围的尽量大,2.死得兔子尽量多. 如果当前不知道情况的药n为k的二倍以 ...
    
			
    8. 
						
  8. [OpenMP] 并行计算入门
			
    OpenMP并行计算入门 个人理解 OpenMP是一种通过共享内存并行系统的多处理器程序设计的编译处理方案,通过预编译指令告诉编译器哪些代码块需要被并行化,通过拷贝代码块实现并行程序.对于循环的并行化 ...
    
			
    9. 
						
  9. pbr 5.2.1需使用中科大的源，豆瓣的不行
			
    -bash-4.2$ .tox/tempest/bin/pip install pbr==5.2.1DEPRECATION: Python 2.7 will reach the end of its  ...
    
			
    10. 
						
  10. LINQ中AsEnumerable与AsQueryable的区别
			
    AsEnumerable将一个序列向上转换为一个IEnumerable, 强制将Enumerable类下面的查询操作符绑定到后续的子查询当中:AsQueryable将一个序列向下转换为一个IQuery ...
    
			
    11.