npm + webpack +react
踏上征途
在开始以前，你须要把你的 Node.js 和 NPM 都更新到最新的版本。访问 nodejs.org 查看安装详情。咱们将会使用 NPM 安装一些工具。javascript
开始使用 Webpack 很是简单，我会展现给你看使用它的一个简单的项目。第一步，为你的项目新建一个文件夹，而后输入 npm init，而后填写相关问题。这样会为你建立了 package.json，不用担忧填错，你能够以后修改它。html
安装 Webpack
接下来咱们安装 Webpack，咱们要把它安装在本地，而后把它做为项目依赖保存下来。这样你能够在任何地方编译（服务端编译之类的）。输入 npm i wepack --save-dev。若是你想运行它，就输入 node_modules/.bin/webpack。java
目录结构
项目的目录结构长这样：node
- /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 的配置文件长这样：web
webpack.config.jsnpm
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 像这样：json
app/component.jsgulp
'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。
- 1. npm+webpack+babel+react安装
- 2. webpack和npm
- 3. npm scripts + webpack 实践经验（React、Nodejs）
- 4. npm & webpack
- 5. npm安装react-dom...
- 6. React及npm、ES6
- 7. react+tsx+webpack
- 8. webpack+babel+react
- 9. React使用——webpack
- 10. webpack+react+antd
- 更多相关文章...
- • ionic 安装 - ionic 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。