让我们一起构建一个小的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. Linux下软件安装的四种方式
			
    一.源码安装 步骤: 下载,解压源码(常见的源码打包格式:.tar.gz/.tar.bz2); 可以直接下载源码再上传至linux服务器,或者在联网状态下,直接通过wget等命令获取源码安装包;源码解 ...
    
			
    2. 
						
  2. SQL基本语法总结
			
    #创建数据库 DROP DATABASE IF EXISTS 数据库名; CREATE DATABASE 数据库名; #展示所有的数据库: SHOW DATABASES; #查看某个数据库的定义信息: ...
    
			
    3. 
						
  3. 纪念Google Reader—Google Reader的最后一天
			
    从2006年到今天,几乎每天我都会打开Google Reader,但是今天不一样,因为它是最后一天.心情有些依依不舍,像是与一位多年老朋友永别.因此我非常痛恨Google,先给你送来个好朋友,再从你身 ...
    
			
    4. 
						
  4. 手机QQ访问时，html页面在QQ中自定义预览和自定义分享
			
    手机QQ访问时,html页面在QQ中自定义预览和自定义分享 有一天,产品说要做个自定义预览和分享功能,于是很快在微信上实现了,可是不知道在QQ上怎么实现,查看了很多网站,最后才找到了解决方案,于是想和 ...
    
			
    5. 
						
  5. python爬虫之路——Python的re模块及其方法
			
    介绍常用的三种方法:search(),sub(),findall() search():匹配并提取第一个符合规律的内容,然后返回一个正则表达式的对象 #提取字符串中的第一个数字 import re a ...
    
			
    6. 
						
  6. 如何处理VirtualBox启动错误消息：The vboxdrv kernel module is not loaded
			
    我在启动minikube时,遇到如下错误消息: Starting local Kubernetes v1.10.0 cluster... Starting VM... E1010 03:27:37.9 ...
    
			
    7. 
						
  7. 使用EventLog组件保存Windows系统日志
			
    实现效果: 知识运用: EventLog类的CreateEventSource方法 //用于建立一个应用程序  使用指定的Sourc作为向本机上的日志中写入日志项的有效事件源 CreateEventS ...
    
			
    8. 
						
  8. 01_5_删除指定id的单个对象
			
    01_5_删除指定id的单个对象 1. 配置相应的映射文件内容 <delete id="deleteStudent" parameterClass="int&quo ...
    
			
    9. 
						
  9. 02_5if switch分支与循环语句
			
    02_5if switch分支与循环语句 1.语句 1.1条件语句-根据不同条件,执行不同语句. if if ... else if ... else if if ... else if ... el ...
    
			
    10. 
						
  10. Mac下快捷键的符号所对应的按键
			
    
			
    11.