npm + webpack +react
踏上征途
在开始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。访问 nodejs.org 查看安装详情。我们将会使用 NPM 安装一些工具。
开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入 npm init，然后填写相关问题。这样会为你创建了 package.json，不用担心填错，你可以之后修改它。
安装 Webpack
接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。这样你可以在任何地方编译（服务端编译之类的）。输入 npm i wepack --save-dev。如果你想运行它，就输入 node_modules/.bin/webpack。
目录结构
项目的目录结构长这样：
- /app
- main.js
- component.js
- /build
- bundle.js (自动创建)
- index.html
- package.json
- webpack.config.js
我们会使用 Webpack 在我们的 /app 里来自动创建 bundle.js 。接下来，我们来设置 webpack.config.js。
设置 Webpack
Webpack 的配置文件长这样：
webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
};
运行你的第一个编译
现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的 Hello World，设置 /app 像这样：
app/component.js
'use strict';
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
app/main.js
'use strict';
var component = require('./component.js');
document.body.appendChild(component());
现在在你的命令行运行 webpack，然后你的应用会开始编译，一个 bundle.js 文件就这样出现在你的 /build 文件夹下，需要在build/ 下的 index.html 去启动项目。
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
这个文件可以用 html-webpack-plugin 来生成。如果你觉得冒险，那就把剩下的工具交给它来做。使用它就只有一个配置的问题。一般来说使用 Webpack 来工作就是这么个套路。
运行应用
只要双击 index.html 或者设置一个 Web 服务指向 build/ 文件夹。
设置 package.json scripts
npm 是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。
在这个案例中我们把编译步骤放到 npm run build 中是这样：
npm i webpack --save- 如果你想要把 Webpack 作为一个项目的开发依赖，就可以使用--save-dev，这样就非常方便地让你在开发一个库的时候，不会依赖工具（但不是个好方法！）。- 把下面的内容添加到
package.json中。
"scripts": {
"build": "webpack"
}
现在你可以输入 npm run build 就可以编译了。
当项目越发复杂的时候，这样的方法会变得越来越有效。你可以把所有复杂的操作隐藏在 scripts 里面来保证界面的简洁。
不过潜在的问题是这种方法会导致如果你使用一些特殊的指令的时候只能在 Unix 环境中使用。所以如果你需要考虑一些未知的环境中的话，那么 gulp-webpack 会是一个好的解决方案。
注意 NPM 会找到 Webpack，
npm run会把他临时加到PATH来让我们这个神奇的命令工作。
工作流
如果需要一直输入 npm run build 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 webpack-dev-server。
设置 webpack-dev-server
第一步，输入 npm i webpack-dev-server --save，此外，我们需要去调整 package.json scripts 部分去包含这个指令，下面是基本的设置：
package.json
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
}
当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思：
webpack-dev-server- 在 localhost:8080 建立一个 Web 服务器--devtool eval- 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号--progress- 显示合并代码进度--colors- Yay，命令行中显示颜色！--content-base build- 指向设置的输出目录
总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！
访问 http://localhost:8080 你会看到效果。
浏览器自动刷新
当运行 webpack-dev-server 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 index.html 放到 build/ 文件夹下，然后做这样的修改：
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>
我们需要增加一个脚本当发生改动的时候去自动刷新应用，你需要在配置中增加一个入口点。
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
};
就是这样！现在你的应用就可以在文件修改之后自动刷新了。
默认环境
在上面的例子中我们创建了 index.html 文件来获取更多的自由和控制。同样也可以从 http://localhost:8080/webpack-dev-server/bundle 运行应用。这会触发一个默认的你不能控制的 index.html ，它同样会触发一个允许iFrame中显示重合并的过程。
引入文件
模块
Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块可以直接在盒外运行。
ES6 模块
import MyModule from './MyModule.js';
CommonJS
var MyModule = require('./MyModule.js');
AMD
define(['./MyModule.js'], function (MyModule) {
});
理解文件路径
一个模块需要用它的文件路径来加载，看一下下面的这个结构：
- /app
- /modules
- MyModule.js
- main.js (entry point)
- utils.js
踏上征途
在开始之前，你需要把你的 Node.js 和 NPM 都更新到最新的版本。访问 nodejs.org 查看安装详情。我们将会使用 NPM 安装一些工具。
开始使用 Webpack 非常简单，我会展示给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，然后输入
npm init，然后填写相关问题。这样会为你创建了package.json，不用担心填错，你可以之后修改它。安装 Webpack
接下来我们安装 Webpack，我们要把它安装在本地，然后把它作为项目依赖保存下来。这样你可以在任何地方编译（服务端编译之类的）。输入
npm i wepack --save-dev。如果你想运行它，就输入node_modules/.bin/webpack。目录结构
项目的目录结构长这样：
- /app
- main.js
- component.js
- /build
- bundle.js (自动创建)
- index.html
- package.json
- webpack.config.js
我们会使用 Webpack 在我们的
/app里来自动创建bundle.js。接下来，我们来设置webpack.config.js。设置 Webpack
Webpack 的配置文件长这样：
webpack.config.js
var path = require('path'); module.exports = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, '/build'),
filename: 'bundle.js',
},
};
运行你的第一个编译
现在我们有了一个最简单的配置，我们需要有什么东西去编译，让我们开始一个经典的
Hello World，设置/app像这样：app/component.js
'use strict'; module.exports = function () {
var element = document.createElement('h1'); element.innerHTML = 'Hello world'; return element;
};
app/main.js
'use strict';
var component = require('./component.js'); document.body.appendChild(component());现在在你的命令行运行
webpack，然后你的应用会开始编译，一个bundle.js文件就这样出现在你的/build文件夹下，需要在build/下的 index.html 去启动项目。build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
这个文件可以用 html-webpack-plugin 来生成。如果你觉得冒险，那就把剩下的工具交给它来做。使用它就只有一个配置的问题。一般来说使用 Webpack 来工作就是这么个套路。
运行应用
只要双击 index.html 或者设置一个 Web 服务指向
build/文件夹。设置
package.jsonscriptsnpm是一个非常好用的用来编译的指令，通过npm你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在package.json中设置scripts的值就可以了。在这个案例中我们把编译步骤放到
npm run build中是这样：npm i webpack --save- 如果你想要把 Webpack 作为一个项目的开发依赖，就可以使用--save-dev，这样就非常方便地让你在开发一个库的时候，不会依赖工具（但不是个好方法！）。- 把下面的内容添加到
package.json中。
"scripts": {
"build": "webpack"
}
现在你可以输入
npm run build就可以编译了。当项目越发复杂的时候，这样的方法会变得越来越有效。你可以把所有复杂的操作隐藏在
scripts里面来保证界面的简洁。不过潜在的问题是这种方法会导致如果你使用一些特殊的指令的时候只能在 Unix 环境中使用。所以如果你需要考虑一些未知的环境中的话，那么 gulp-webpack 会是一个好的解决方案。
注意 NPM 会找到 Webpack，
npm run会把他临时加到PATH来让我们这个神奇的命令工作。工作流
如果需要一直输入
npm run build确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置webpack-dev-server。设置
webpack-dev-server第一步，输入
npm i webpack-dev-server --save，此外，我们需要去调整package.jsonscripts 部分去包含这个指令，下面是基本的设置：package.json
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
}
当你在命令行里运行
npm run dev的时候他会执行 dev 属性里的值。这是这些指令的意思：webpack-dev-server- 在 localhost:8080 建立一个 Web 服务器--devtool eval- 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号--progress- 显示合并代码进度--colors- Yay，命令行中显示颜色！--content-base build- 指向设置的输出目录
总的来说，当你运行
npm run dev的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！访问 http://localhost:8080 你会看到效果。
浏览器自动刷新
当运行 webpack-dev-server 的时候，它会监听你的文件修改。当项目重新合并之后，会通知浏览器刷新。为了能够触发这样的行为，你需要把你的 index.html 放到
build/文件夹下，然后做这样的修改：build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>
我们需要增加一个脚本当发生改动的时候去自动刷新应用，你需要在配置中增加一个入口点。
var path = require('path'); module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, '/build'),
filename: 'bundle.js',
},
};
就是这样！现在你的应用就可以在文件修改之后自动刷新了。
默认环境
在上面的例子中我们创建了 index.html 文件来获取更多的自由和控制。同样也可以从 http://localhost:8080/webpack-dev-server/bundle 运行应用。这会触发一个默认的你不能控制的 index.html ，它同样会触发一个允许iFrame中显示重合并的过程。
引入文件
模块
Webpack 允许你使用不同的模块类型，但是 “底层”必须使用同一种实现。所有的模块可以直接在盒外运行。
ES6 模块
import MyModule from './MyModule.js';
CommonJS
var MyModule = require('./MyModule.js');
AMD
define(['./MyModule.js'], function (MyModule) { });
理解文件路径
一个模块需要用它的文件路径来加载，看一下下面的这个结构：
- /app
- /modules
- MyModule.js
- main.js (entry point)
- utils.js
打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js
app/main.js
// ES6
import MyModule from './modules/MyModule.js'; // CommonJS
var MyModule = require('./modules/MyModule.js');
最开始的
./是 “相对当前文件路径”让我们打开 MyModule.js 然后引入 app/utils：
app/modules/MyModule.js
// ES6 相对路径
import utils from './../utils.js'; // ES6 绝对路径
import utils from '/utils.js'; // CommonJS 相对路径
var utils = require('./../utils.js'); // CommonJS 绝对路径
var utils = require('/utils.js');
相对路径是相对当前目录。绝对路径是相对入口文件，这个案例中是 main.js。
- /app
打开 main.js 然后可以通过下面两种方式引入 app/modules/MyModule.js
app/main.js
// ES6
import MyModule from './modules/MyModule.js';
// CommonJS
var MyModule = require('./modules/MyModule.js');
最开始的 ./ 是 “相对当前文件路径”
让我们打开 MyModule.js 然后引入 app/utils：
app/modules/MyModule.js
// ES6 相对路径
import utils from './../utils.js';
// ES6 绝对路径
import utils from '/utils.js';
// CommonJS 相对路径
var utils = require('./../utils.js');
// CommonJS 绝对路径
var utils = require('/utils.js');
相对路径是相对当前目录。绝对路径是相对入口文件，这个案例中是 main.js。
npm + webpack +react的更多相关文章
- npm+webpack+babel+react安装
npm+webpack+babel+react安装 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm 2.在项目文件目录下生成package.json # 进入项目目录$ ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Webpack+React配合开发
前面两篇关于webpack的基础和进阶,请先务必阅读之前的文章. Webpack教程一 Webpack教程二 什么是React React是一个由Facebook开发的library,它的口号是“A ...
- 手把手教你如何使用webpack+react
上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的 ...
随机推荐
- lintcode：Search Insert Position 搜索插入位置
题目: 搜索插入位置 给定一个排序数组和一个目标值,如果在数组中找到目标值则返回索引.如果没有,返回到它将会被按顺序插入的位置. 你可以假设在数组中无重复元素. 样例 [1,3,5,6],5 → 2 ...
- 客户端一个http连接包含两个方向，一个是这个http连接的输入，另一个是这个http连接的输出。
1.客户端一个http连接包含两个方向,一个是这个http连接的输入,另一个是这个http连接的输出. 利用httpclient进行ip地址和端口号连接后,http的输出端作为http请求参数设置.h ...
- 解决不安装VC运行库（VC2005，VC2008），程序运行出错的方法
因为VS2005以后程序采用了manifest的生成方式,所以发布的时候要和运行库一起发布.但是我们平时开发和发布的时候如果都要客户安装运行库,那就不太方便了.你可以Microsoft下载:http: ...
- 关于spring-mvc的InitBinder注解的参数
关于spring-mvc的InitBinder注解的参数 通过Spring-mvc的@InitBinder注释的方法可以对WebDataBinder做一些初始化操作.比如设置Validator. 我一 ...
- ActiveMQ集群(2)
ActiveMQ具有强大和灵活的集群功能,但在使用的过程中会发现很多的缺点,ActiveMQ的集群方式主要有两种:Master-Slave和Broker Cluster. 1.Master-Slave ...
- Linux下jvm、tomcat、mysql、log4j优化配置
小菜一直对操作系统心存畏惧,以前也很少接触,这次创业购买了Linux云主机,由于木有人帮忙,只能自己动手优化服务器了.... 小菜的云主机配置大致为:centeos6(32位),4核心cpu,4G内存 ...
- 完美配置Tomcat的HTTPS
Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.lang.Exception: Connector attribute SSL ...
- ha_innobase::general_fetch
/***********************************************************************//** Reads the next or previ ...
- bzoj2791
每个顶点有且仅有一条出边是什么意思呢 类似一棵树,树上的边都是由儿子指向父亲的,并且这个东西带着一个环 也就是一个个有向环套有向树…… 这题还是比较简单的,把环作为根然后类似lca做即可,注意细节的p ...
- Java [Leetcode 202]Happy Number
题目描述: Write an algorithm to determine if a number is "happy". A happy number is a number d ...