Webpack 模块打包工具（module bundler）功能：
- 将 CSS、图片与其他资源打包
- 打包之前预处理（Less、CoffeeScript、JSX、ES6 等）档案
- 依 entry 文件不同，把 .js 分拆为多个 .js 档案
- 整合丰富的 Loader 可以使用
1.CDN引入<script>法写React
1.理解 React 是 Component（零件） 导向的应用程式设计
2.引入 react.js 、 react-dom.js、babel-standalone 版script
3.在 <body> 编写 React Component 要插入（mount）指定节点的地方： <div id="example"></div>
4.通过 babel 进行语言翻译 React JSX 语法， babel 会将其转为浏览器看的懂得 JavaScript
例，第一个react（CDN引入<script>法）：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 以下引入 react.js, react-dom.js（react 0.14 后将 react-dom 从 react 核心分离，更符合 react 跨平台抽象化的定位）以及 babel-core browser 版--> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script> </head> <body> <!--React Component 要插入的地方 --> <div id='example'></div> <!-- 以下就是包在 babel（通过进行语言翻译）中的 React JSX 语法，babel 会将其转为浏览器看的懂得 JavaScript --> <script type='text/babel'> ReactDOM.render( <div>hello world!</div>, document.getElementById('example')); </script> </body> </html>
2.通过 Hello World 实例来介绍如何用 Webpack 设置 React 开发环境：
1.依据你的操作系统安装 Node 和 NPM（目前版本的 Node 都会内建 NPM）
node安装：https://www.runoob.com/nodejs/nodejs-install-setup.html
2.通过 NPM 安装 :webpack、webpack loader、webpack-dev-server
【此方法现在有些过时，且麻烦，国内现用方法】https://www.cnblogs.com/chenxi188/p/11702799.html
首选：因为npm有些慢，可用国内的淘宝cnmp来代替方法参考：
A。Webpack 中的 loader ：类似于 browserify 内的 transforms，但 Webpack 在使用上比较多元，除了 JavaScript loader 外也有 CSS Style 和图片的 loader
B。webpack中的webpack-dev-server可以启动开发用 server，方便我们测试
// 按指示初始化 NPM 设定档 package.json $ npm init // --save-dev 是可以让你将安装套件的名称和版本资讯存放到 package.json，方便日后使用 $ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server
3.在根目录设定 webpack.config.js
事实上， webpack.config.js 有点类似于 gulp 中的 gulpfile.js 功用，主要是设定 webpack 的相关设定
// 这边使用 HtmlWebpackPlugin，将 bundle 好的<script> 插入到 body。${__dirname} 为 ES6 语法对应到 __dirname const HtmlWebpackPlugin = require('html-webpack-plugin'); const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ template: `${__dirname}/app/index.html`, filename: 'index.html', inject: 'body', }); module.exports = { // 档案起始点从 entry 进入，因为是阵列所以也可以是多个档案 entry: [ './app/index.js', ], // output 是放入产生出来的结果的相关参数 output: { path: `${__dirname}/dist`, filename: 'index_bundle.js', }, module: { // loaders 則是放想要使用的 loaders，在这边是使用 babel-loader 将所有 .js（这边用到正则）相关文件（排除了 npm 安裝的套件位置 node_modules）编译成浏览器可以阅读的 JavaScript。 //preset 则是使用的 babel 编译规则，这边使用 react、es2015。若是已经单独使用 .babelrc 作为 presets 設定的话，则可以省略 query loaders: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'], }, }, ], }, // devServer 则是 webpack-dev-server 设定 devServer: { inline: true, port: 8008, }, // plugins 放置所使用的外挂 plugins: [HTMLWebpackPluginConfig], };
4.在根目录设定 .babelrc
{ "presets": [ "es2015", "react", ], "plugins": [] }
5.安装 react 和 react-dom
$ npm install --save react react-dom
6.编写 Component（记得把 index.html 以及 index.js 放到 app 文件夹底下喔！）
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Setup</title> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <!-- 想要插入 React Component 的位置 --> <div id="app"></div> </body> </html>
index.js
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.state = { }; } render() { return ( <div> <h1>Hello, World!</h1> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));
7.在终端机使用 webpack 进行成果展示.
webpack 相关指令：
- webpack：会在开发模式下开始一次性的建置
- webpack -p：会建置 production 的程式码
- webpack --watch：会监听程式码的修改，当储存时有异动时会更新档案
- webpack -d：加入 source maps 档案
- webpack --progress --colors：加上处理进度与颜色
如果不想每次都打一长串的指令码的话可以使用 package.json 中的scripts 设定：
"scripts": { "dev": "webpack-dev-server --devtool eval --progress --co lors --content-base build" }
8.当我们此时我们可以打开浏览器输入 http://localhost:8008 ，就可以看到Hello, world! 了！