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管理包,然 ...
随机推荐
- 滚动条美化插件 nicescroll
这个插件使用起来非常简单,首先下载插件jquery.nicescroll.min.js 然后在页面中引入jquery,再引入这个插件, 然后在页面中需要修改滚动条的地方,例如id为box的div &l ...
- 如何快速构建CMBD系统-glpi
一.CMBD系统构建步骤 起初,开发这套CMBD系统是为了帮助朋友公司简化设备统计操作,以代替人工入库方式.举个例子,单位发放笔记本,或者设备更换了硬盘,都需要人工签到,手动输入统计,安装了CMBD系 ...
- python+selenium之处理HTML5的视频播放
from selenium import webdriver from time import sleep driver = webdriver.Firefox() driver.get(" ...
- python基础教程总结3—字典
1.字典 1.1 字典类型与序列类型的区别: 存取和访问数据的方式不同. 序列类型只用数字类型的键(从序列的开始按数值顺序索引): 映射类型可以用其他对象类型作键(如:数字.字符串.元祖,一般用字符串 ...
- 撤销git pull命令
比如:在master分支上执行了git pull命令,想回到pull之前分支所在的commit位置. 步骤一:用 git reflog master 查看master分支的历史变动记录,其中有一个就是 ...
- JS中的作用域和作用域链
本文原链接:https://cloud.tencent.com/developer/article/1403589 前言 作用域(Scope) 1. 什么是作用域 2. 全局作用域和函数作用域 3. ...
- 团队作业-Beta冲刺（周三）
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1 这个作业要求在哪里 https://edu.cnblo ...
- 项目中遇到的bug
1. babel编译转换时发生了报错: BabelLoaderError: SyntaxError: Unexpected token babel预置的转换器是 babel-preset-es2015 ...
- SQLServer锁原理和锁的类型
1.锁的用途 为了避免同时争夺数据库资源,将数据库加锁,只有拿到钥匙的用户才能使用: 2.锁的粒度 行锁(Row)--->页锁(Page)--->区锁(Partition 8个页)---- ...
- 03_10_Object类的toString equals等方法
03_10_Object类的toString equals等方法 1. toString方法 Object类中定义有public String toString()方法,其返回值是String类型,描 ...