一、什么是webpack？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
我学webpack是看一个大牛写的博客，特别好，这里推荐下http://www.jianshu.com/p/42e11515c10f
二、什么是Ant Design
Ant Design是蚂蚁金服体验技术部做的前端 UI 基于react的组件库。
官网：https://ant.design/docs/react/getting-started-cn
三、创建项目
安装webpack
npm install -g webpack
创建个文件夹demo，在该目录下打开命令提示符，输入
npm init
然后一直回车回车就好了，这时里的目录里出现了package.json
打开package.json 复制底下代码（个人总结的常用的模块，其他若你们项目需要的就自行安装）
{
"name": "你的项目名",
"version": "1.0.0",
"description": "项目描述",
"main": "app/index.js",
"scripts": {
"test": "",
"start": "node server",
"build": "webpack --config ./webpack.production.config.js --progress --profile --colors",
"eslint": "eslint ."
},
"keywords": [
"webpack",
"react",
"web"
],
"author": "ouxiaojie",
"license": "MIT",
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-hot-loader": "^3.0.0",
"react-router": "^4.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.7.1",
"webpack-dev-server": "^2.9.1"
}
}
然后在命令提示符里输入安装各种模块
npm install
图片.png
在文件夹demo里创建以下文件
图片.png
在webpack.config.js文件里复制以下代码
'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
// path.join(__dirname, 'app/final/index.js')
path.join(__dirname, 'app/index.js')
],
output: {
path: path.join(__dirname, './dist/'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
// template: './app/index.tpl.html',
template: './index.tpl.html',
inject: 'body',
filename: './index.html'
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
//new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
module: {
// resolve: {
// extensions: ['', '.js', '.json']
// },
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['react', 'es2015']
}
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.less/,
loader: 'style-loader!css-loader!less-loader'
}, {
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192',
}
]
}
};
在server.js文件里复制以下代码
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
// It suppress error shown in console, so it has to be set to false.
quiet: false,
// It suppress everything except error, so it has to be set to false as well
// to see success build.
noInfo: false,
stats: {
// Config for minimal console.log mess.
assets: false,
colors: true,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false
}
}).listen(3000, 'localhost', function (err) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
webpack的自动化打包，热更新就配置好啦！代码有疑问的就在上面我推荐的大牛写的webpack简书里找答案啦~
然后在index.tpl.html里输入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在app文件夹里新建两个文件
图片.png
在index.js文件里输入：
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './root'
render(
<AppContainer>
<Root />
</AppContainer>,
document.getElementById('root')
);
if(module.hot){
module.hot.accept('./root',() =>{
const NewRoot = require('./root').default;
render(
<AppContainer>
<NewRoot />
</AppContainer>,
document.getElementById('root')
);
});
}
在root.js里输入：
import React, { Component } from 'react';
export default class Root extends Component {
render() {
return (
<div>Hello 张艺兴~</div>
);
}
};
保存文件，在命令提示符输入
npm run build
图片.png
看到successfully就打包成功啦~
然后在浏览器中输入
http://localhost:3000/
能看到
图片.png
接着 安装antd 组件
npm install antd --save-dev
接着安装以下插件，这样你用antd的组件时就不用手动写import啦~
npm install babel-plugin-import --save-dev // 此插件安装前，必须先安装 file-loader
npm install babel-plugin-transform-runtime --save-dev
然后在webpack.config.js里添加相应的loader
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['react', 'es2015'],
plugins: [//修改这里的
["import", {libraryName: "antd", style: "css"}]//修改这里的
] //修改这里的
}
},
配置好了，就可以测试啦
把root.js里的代码修改为
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'antd';
export default class Root extends Component {
render() {
return (
<DatePicker />
);
}
};
然后保存文件，在命令提示符输入
npm run build
在浏览器的http://localhost:3000/中看到
图片.png
这样就把React和Webpack和ant-design的各种配置都搭好了，可以开始写代码了~
网友评论