踏上征途

在开始之前，你需要把你的 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.json scripts
  
  npm 是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。
  
  在这个案例中我们把编译步骤放到 npm run build 中是这样：
  1. npm i webpack --save - 如果你想要把 Webpack 作为一个项目的开发依赖，就可以使用 --save-dev，这样就非常方便地让你在开发一个库的时候，不会依赖工具（但不是个好方法！）。
  2. 把下面的内容添加到 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 属性里的值。这是这些指令的意思：
  1. webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
  2. --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
  3. --progress - 显示合并代码进度
  4. --colors - Yay，命令行中显示颜色！
  5. --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。

打开 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 的 ...

随机推荐

linux进程的地址空间，核心栈，用户栈，内核线程
linux进程的地址空间,核心栈,用户栈,内核线程地址空间: 32位linux系统上,进程的地址空间为4G,包括1G的内核地址空间,和3G的用户地址空间. 内核栈: 进程控制块task_struct ...
HTML5入门2---js获取HTML元素的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Linux系统与性能监控
原文地址:http://kerrigan.sinaapp.com/post-7.html Linux System and Performance Monitoring http://www.hous ...
BS架构与CS架构的区别
C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...
对象的继承关系在数据库中的实现方式和PowerDesigner设计
原文:对象的继承关系在数据库中的实现方式和PowerDesigner设计在面向对象的编程中,使用对象的继承是一个非常普遍的做法,但是在关系数据库管理系统RDBMS中,使用的是外键表示实体(表)之间的 ...
C++：常类型Const
常类型:使用类型修饰符const说明的类型,常类型的变量或对象成员的值在程序运行期间是不可改变的. 3.10.1 常引用如果在说明引用时用const修饰,则被说明的引用为常引用.如果用常引用做形参, ...
一个小应用的dbcp和c3p0配置实例
以下是一个小应用的数据库连接池配置,包括DBCP和C3P0的配制方法因为是小应用,完全不涉及访问压力,所以配置上采取尽量节约数据库资源的方式具体要求如下:初始化连接数为0连接不够,需要新创建时,每 ...
QTP10&QTP11&UFT11.5的安装和破解
QTP10的安装和破解方法下载QTP10.0并安装. 安装成功后,在C:\Program Files\Common Files\Mercury Interactive下创建文件夹:License M ...
java--面向抽象编程
所谓面向抽象编程是指当设计某种重要的类时,不让该类面向具体的类,而是面向抽象类,及所设计类中的重要数据是抽象类声明的对象,而不是具体类声明的对象.就是利用abstract来设计实现用户需求. 比如:我 ...
22.allegro中PCB打印设置[原创]
1. -- 2. 3. 4. ----

npm + webpack +react

踏上征途

安装 Webpack

目录结构

设置 Webpack

运行你的第一个编译

运行应用

设置 package.json scripts

工作流

设置 webpack-dev-server

浏览器自动刷新

默认环境

引入文件

模块

ES6 模块

CommonJS

AMD

理解文件路径

踏上征途

安装 Webpack

目录结构

设置 Webpack

运行你的第一个编译

运行应用

设置 package.json scripts

工作流

设置 webpack-dev-server

浏览器自动刷新

默认环境

引入文件

模块

ES6 模块

CommonJS

AMD

理解文件路径

npm + webpack +react的更多相关文章

随机推荐

热门专题

设置 `package.json` scripts

设置 `webpack-dev-server`

设置 `package.json` scripts

设置 `webpack-dev-server`