webpack 环境搭建+实现热更新
$ 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
附上项目结构
webpack 环境搭建+实现热更新的更多相关文章
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- Vuejs开发环境搭建及热更新
一.安装NPM 1.1最新稳定版本: npm install vue 二.命令行工具安装 国内速度慢,使用淘宝镜像: npm install -g cnpm --registry=https://re ...
- 搭建带热更新功能的本地开发node server
引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...
- Spring Boot 利用 nginx 实现生产环境的伪热更新
当我们在服务器部署Java程序,特别是使用了 Spring Boot 生成单一 Jar 文件部署的时候,单一文件为我们开发单来的极大的便利性,保障程序的完整性.但同时对我们修改程序中的任何一处都带来重 ...
- webpack 环境搭建
Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...
- TypeScript + Webpack 环境搭建
TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...
- webpack环境搭建
环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...
- react+es6+webpack环境搭建以及项目入门
前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...
- webpack环境搭建开发环境，JavaScript面向对象的详解，UML类图的使用
PS:因为所有的设计模式都是基于面向对象来完成的,所以在讲解设计模式之前先来过一下面向对象都有哪些知识点 搭建开发环境 初始化npm环境 下载安装nodejs安装即可,nodejs自带npm管理包,然 ...
随机推荐
- jsoup爬虫，项目实战，欢迎收看
import com.mongodb.BasicDBObject import com.mongodb.DBCollection import org.jsoup.Jsoup import org.j ...
- Mysql中WHERE IN，UNION 用法详解
WHERE IN 用法 这里分两种情况来介绍 1.in 后面是记录集,如: select * from table where uname in(select uname from ...
- canvas、svg、canvas与svg的区别
一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...
- edittext 设置不自动获取焦点
给父级控件 设置两个属性,可以把焦点抢夺过去,最好是没有任何事件的父级控件(本人比较喜欢在xml文件的跟布局设置,因为页面的跟布局一般情况下,是不会设置任何事件的) android:focusable ...
- C-C++字符输出时遇到字符＇\n','\0'区别
#include "iostream" #include "stdio.h" #include "stdio_ext.h" #include ...
- Beginning Python Chapter 2 Notes
Python基本数据类型用Python官方说法应该叫Python内建数据类型,英文叫built-in type.下面稍微总结了一下我看到过的Python内建数据类型. Python基本数据类型 数据类 ...
- IT圈网红，抢鲜围观
即将于2017年10月23-26日,在北京举办的微软技术暨生态大会,是微软中国年度最盛大的科技峰会,是微软技术大会与合作伙伴大会的首次联袂,也是聚集众多IT大咖的技术狂欢派对. 无论你想实现现代化工作 ...
- Maven 中maven-assembly-plugin插件的使用笔记 SpringBoot环境
首先创建一个多模块的SpringBoot项目 项目结构 父pom的内容如下: <?xml version="1.0" encoding="UTF-8"?& ...
- dataset datatable datacolums datarow
DataSet 表示数据在内存中的缓存. 属性 Tables 获取包含在 DataSet 中的表的集合. ds.Tables["sjxx"] DataTable 表示内存中数据的 ...
- 10.1 plan
1951 [Sdoi2010]古代猪文 Sdoi2010 Contest2 807 1928 1566 [NOI2009]管道取珠 806 1429 2756 [S ...