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管理包,然 ...
随机推荐
- Kendo MVVM (二) ObservableObject 对象
概述 Kendo MVVM 框架关键的一个部分为 ViewModel,它主要是通过 kendo.data.ObserableObject 来提供支持的.它可以监控改变( UI 变化或是值的变化)并通知 ...
- ArcSDE 10.1 For Windows 创建空间数据库与常见错误_SQL Server
本文是2013年时候参加ESRI竞赛,创建ArcSDE 10.1 for SQL Server时候出问题了,因此写了该文档. 由于一直忙于学习,忘了发布.今天一师弟也遇到同样问题,为此我觉得可能有不少 ...
- SharePoint 2013 安装配置（3-1）
在第二部分中,我向您展示了如何在Windows Server 2012 R2 for SharePoint 2013上设置Active Directory域服务.现在我们应该能够在Active Dir ...
- FlowVisor相关
1. FlowVisor工作原理(转) 作为一个网络虚拟化平台,FlowVisor部署在标准OpenFlow控制器和OpenFlow交换机之间,成为二者的透明代理.FlowVisor能够与多个控制器连 ...
- 弄了一个星期的wp 8.1，吐血的感觉
看到8.1出来这么久了,心痒难耐,忍不住想重新把应用写一遍,于是上个星期开始动手,用的mvvm模式,结果一路下来,sqlce不能用了,那好吧,我用sqlite,webrequest变成httpclie ...
- [VC]char 和 wchar_t相互转化
#include <windows.h> #include <stdio.h> //function: charTowchar //purpose:char to WCHAR ...
- ArrayList 源码分析（JDK1.8）
ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess ...
- 怎么在WEBSTORM中设置代码模板 Live Templates
怎么在WEBSTORM中设置代码模板 Live Templates setting 里面 https://www.cnblogs.com/xinzaimengzai/p/9938464.html
- Windows无法停用设备，原因是某个程序正在使用它...
有时候,当我们用完U盘需要弹出是,会出现“Windows无法停用设备,原因是某个程序正在使用它…”的黄色警告,很无奈.不过可以通过一些方法进行解决(win10版): 1. 打开“文件资源管理器”,选择 ...
- mybatis association嵌套association的两级嵌套问题
今天遇到了一个双表连接查询以及自关联的问题,由于第一次遇到,所以在这记下,日后好查阅 针对一个表的关联属性本身也有自关联的情况下,可以用association嵌套association的方法来处理. ...