让我们一起构建一个小的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. AngularJS（四）：控制器、事件
			
    本文也同步发表在我的公众号“我的天空” 控制器 控制器可以说是AngularJS中最重要的部分了!之前的一些示例,除了第一讲的示例以外,我们对于AngularJS的使用都集中在HTML部分,其实Ang ...
    
			
    2. 
						
  2. tomcat配置https 和 http强制跳转https
			
    https是http+ssl的可进行加密传输,身份认证的网络协议,防止数据在传输过程中被窃取.因此,https将得到越来越广泛的应用,下面是如何配置tomcat服务器让http自动转到https的步骤 ...
    
			
    3. 
						
  3. Android 设置资源字体，屏幕截图
			
    字体设置 将下载的资源字体放在assets中, 引用设置 edit..setTypeface(Typeface.createFromAsset(getAssets(), "字体名.ttf&q ...
    
			
    4. 
						
  4. 数据库操作----找了MySQL和SQL Sever两个的基础语句
			
    这是MySQL的基本操作: 1 登入数据库:mysql -uroot -p+密码 (SQL Sever登入: osql -U 用户名 -P 密码) 显示已存在的数据库:show databases;  ...
    
			
    5. 
						
  5. 使用java来压缩图片
			
    使用java来压缩图片,简单几句,清清爽爽 使用0.3的压缩比得到的结果如下(从2.8M压缩到268K,且图片的清晰度看不出明显差别): package carlspringtest; import  ...
    
			
    6. 
						
  6. [PCL]对‘pcl::visualization::CloudViewer::CloudViewer(std::string const&)’未定义的引用
			
    pcl::visualization::CloudViewer viewer("Cloud Viewer"); 这个时候报错. 试了很多方法,有人说,targe t_link 时候 ...
    
			
    7. 
						
  7. PHP实现正态分布的累积概率函数
			
    在实际项目中,遇到需要正态分布算法去计算一个数值在整体的分布区间,例如:  100,90,80,70,60,50,40,30,20,10共10个数,按从高到低的顺序排序,总数的10%分布区域为极高频, ...
    
			
    8. 
						
  8. 新建博客第一天，随意来一发Win8运行命令大全
			
    1.calc:启动计算器 2.appwiz.cpl:程序和功能   3.certmgr.msc:证书管理实用程序 4.charmap:启动字符映射表 5.chkdsk.exe:Chkdsk磁盘检查(管 ...
    
			
    9. 
						
  9. Java 变量及基本数据类型
			
    1.Java变量 1.1 变量的概念 内存中开辟的一块存储空间,用于存放运算过程中需要用到的数据: 该区域有自己的名称(变量名)和类型(数据类型): 该区域的数据可以在同一类型范围内不断变化: 1)  ...
    
			
    10. 
						
  10. mysql 速度检索
			
    授权GRANT ALL PRIVILEGES ON zabbix.* TO 'zabbix'@'127.0.0.1' IDENTIFIED BY 'zabbixpwd' WITH GRANT OPTI ...
    
			
    11.