最近TWaver 3D机房项目打算使用Ant Design来重构后端管理页面，Ant Design 团队不是很熟悉，webpack react等用的不多，所以自己花了一天时间，把相关知识点撸了一遍，给团队做了个培训。 下面主要是一个培训的纲领，整个流程可以通畅的跑下来； 主要是webpack+es2015+react+Ant Design。 当然，ant design 自己有一套框架 打包平台，有兴趣的也可以研究。
官方文档
参考webpack官方文档，点击一下链接
https://doc.webpack-china.org/guides/
https://doc.webpack-china.org/concepts/
安装nodejs
忽略
安装cnpm
npm 很多时候网络不好使，所以使用cnpm更方便，如果cnpm安装不了，可以翻墙安装
npm install -g cnpm
安装webpack
本地安装
cnpm install --save-dev webpack
cnpm install --save-dev webpack@<version>
全局安装
cnpm install --global webpack
创建webpack项目
mkdir webpack-demo && cd webpack-demo
cnpm init -y
cnpm install --save-dev webpack
bundle 文件
一般代码，直接在html文件中引入，js文件，比如下面的index.js
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
使用webpack 后，在html引入一个bundle.js文件，然后通过webpack 会把所有的源代码打包到bundle.js文件中。
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>
webpack配置文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }};
入口Entiry
./src/index.js
输出
output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist')
使用import
不是用webpack的情况下，代码在script标签里面引入，此时可以直接使用
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
使用webpack之后，可以直接使用使用import语句引入在js文件中引入js文件
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
当然此时需要使用以下命令安装lodash包：
cnpm install lodash
打包命令
原始命令
./node_modules/.bin/webpack src/index.js dist/bundle.js
NPM 脚本(NPM Scripts)
通过 ‘创建webpack项目’ 的命令，可以创建package.json,如下：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 配置webpack脚本命令
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
...
},
}
运行命令 npm run build 相当于运行原始命令。
webpack基本概念
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。你可以通过在配置中指定一个 output 字段，来配置这些处理过程
Loader
让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要require()它，然后把它添加到plugins
数组中。
使用 Loader
CSS Loader
安装 css loader
cnpm install --save-dev style-loader
cnpm install --save-dev css-loader
配置CSS Loader
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
使用css文件
引入css文件
import style from '../css/style.css';
需要使用css样式的地方直接使用
element.classList.add('hello');
加载图片资源File Loader
安装File Loader
cnpm install --save-dev file-loader
配置File Loader
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
使用图片资源
引入图片资源
import icon from '../res/icon.png';
在使用的地方，直接使用
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
在css中直接引入图片资源即可：
background: url('../res/icon.png');
加载字体文件 File Loader
配置字体加载
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
在css中使用字体文件
@font-face {
font-family: 'MyFont';
src: url('../res/my-font.woff2') format('woff2'),
url('../res/my-font.woff') format('woff');
font-weight: 600;
font-style: normal;
}
ES2015 && React
要使用ES2015语法 和jsx语法，需要使用bable来转换。 bable-loader相关知识点参考：
更多loader参考：
https://doc.webpack-china.org/loaders/
安装babel-loader
cnpm install babel-loader babel-core babel-preset-env webpack
配置bable-loader
{
test: /\.js$|\.jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react','es2015']
}
}
},
其中 presets: ['react','es2015'] ，表示支持react和es2015语法。
使用es2015
一个简单的示例 print.js
export default function printMe() {
console.log('I get called from print.js !');
}
在index.js中使用方法printMe,首先引入文件：
import print from './print.js';
然后使用printMe方法，此时变成了print:
print();
使用react
要使用react，首选需要安装。
安装react
cnpm install react --save-dev
cnpm install react-dom --save-dev
编写react组件
import React from 'react';
export default class Hello extends React.Component {
render() {
return <div><h1>hi alienzhou!</h1><h2>fdsayoyoyofdasfdsa1</h2></div>;
}
}
使用react组件
首先引入react组件，代码如下：
import Hello from './components/hello.jsx';
然后使用组件，代码如下：
var element = document.createElement('div');
var mountNode = element;
ReactDOM.render(<Hello/>, element);
ReactDOM.render(<span><DatePicker/><DatePicker/></span>,element);
ReactDOM.render(<Hello><Hello> , mountNode);
使用ant design 组件
安装ant design
cnpm install antd --save-dev
使用ant design
- 引入css文件
import 'antd/dist/antd.css';
- 引入相关组件
import { DatePicker } from 'antd';
import { Tabs } from 'antd';
import { Steps } from 'antd';
- 使用组件
ReactDOM.render(
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1"><DatePicker /></TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
, mountNode);
常用插件
到目前为止，我们在
index.html
文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对
文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html
文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。
HtmlWebpackPlugin
HtmlWebpackPlugin 可以重新根据webpack.config.js中的配置重新生成index.html.
安装
cnpm install --save-dev html-webpack-plugin
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
如果你在代码编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。
clean-webpack-plugin
你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的/dist文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在/dist文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理/dist文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。
安装
cnpm install clean-webpack-plugin --save-dev
配置
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
webpack实时刷新
每次要编译代码时，手动运行 npm run build 就会变得很麻烦。
webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：
*webpack's Watch Mode
*webpack-dev-server
*webpack-dev-middleware
webpack-dev-server
本文主要介绍下webpack-dev-server，webpack-dev-server不仅能够自动build，而且还能够自动刷新浏览器。
安装webpack-dev-server
cnpm install --save-dev webpack-dev-server
配置webpack-dev-server
在webpack.config.js中增加如下配置：
devServer: {
contentBase: './dist'
},
然后在package.json中增加如下script：
"start": "webpack-dev-server --open",
现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。试一下！
webpack-dev-middleware
使用webpack-dev-middleware可以考虑和express 等nodejs 的server结合使用，具体使用参考https://doc.webpack-china.org/guides/development/#-webpack-dev-middleware。
source map
当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js,b.js和c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到
bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。
为了更容易地追踪错误和警告，JavaScript 提供了source map(http://blog.teamtreehouse.com/introduction-source-maps)
功能，将编译后的代码映射回原始源代码。如果一个错误来自于
b.js，source map 就会明确的告诉你。
source map 有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。对于本指南，我们使用inline-source-map选项
配置
...
devtool: 'inline-source-map',
...
更多详细额配置参考：
https://doc.webpack-china.org/configuration/devtool
