1webpack简介
webpack是目前最流行的打包工具之一，是一个为前端模块打包构建而生的工具，它既吸取了大量已有的方案优点和教训，也解决了很多前端开发过程中已有的痛点，如代码的拆分与异步加载，对非js资源的支持，强大的loader设计使得它更像是一个构建平台，而不是打包工具。
2webpack,react开发环境
1）新建一个项目文件夹,进入此文件夹，创建package.json文件(npm init命令)
2）确认已安装webpack,web pack-dev-server模块
3）安装babel（babel不懂的请先看）babel的目的有两个(将es6转为es5,转换jsx语法)，
4) 安装babel-preset-es2015和babel-preset-react
5）安装babel-loader和 babel-core
6）babel工作需要.babelrc文件
我要评论
{
"presets":["react","es2015"]
}
7)最重要的webpack.config.js文件的配置
var path = require('path');
var webpack = require('webpack');
var htmlwebpackplugin = require('html-webpack-plugin');
var root_path = path.resolve(__dirname);
var build_path = path.resolve(root_path, 'build');
var app_path = path.resolve(root_path, 'app');
module.exports = {
entry: {
app: path.resolve(app_path, 'app.js')
},
output: {
path: build_path,
filename: '[name].bundle.js'
},
resolve:{
extensions:['','.js','.jsx'],
root:app_path
},
module:{
loaders:[
{
test: /\.js?$/,
loaders: ['babel-loader'],
include: app_path
}
]
},
plugins:[
new htmlwebpackplugin({
title: 'demo',
filename:''
}),
]
}
这个应该是最简单的配置了，不懂的可以网上搜，其中用到htmlwebpackplugin，
这个插件是帮我们自动生成html页面，并自动引入打包后的.js文件，其中的参数意思是，title这个页面的title，filename生成的页面名字
8）最后的项目文件目录为
app是项目组件文件夹，test是测试文件
list.js代码
import react from 'react';
import uuid from 'uuid';
import listitem from '../listitem/listitem';
class list extends react.component {
constructor(props) {
super(props);
this.state = {
items: []
}
}
handleclick() {
const value = this.refs.addlist.value;
const str = {
id: uuid.v1(),
text: value
}
let items = this.state.items;
items = [...items, str];//合并数值
this.setstate({
items
})
}
//删除其中的
deleteitem(id) {
this.setstate({
items: this.state.items.filter(
result => result.id !== id
),
});
}
render() {
const listit = this.state.items.map(item => {
return (
<listitem key={item.id} name={item} ondelete={this.deleteitem.bind(this)} />
);
});
return (
<div classname="list">
<input type="text" placeholder="请输入" ref="addlist" />
<button classname="addbutton" onclick={this.handleclick.bind(this)}>添加值</button>
<ul>
{listit}
</ul>
</div>
);
}
}
export default list;
listitem.js
import react from 'react';
class listitem extends react.component {
render() {
const text = this.props.name;
return (
<li onclick={() => this.props.ondelete(text.id)}>
<span>{text.text}</span>
</li>
)
}
}
export default listitem;
app.js文件
import react from 'react';
import reactdom from 'react-dom';
import list from './list/list';
const app = document.createelement('div');
document.body.appendchild(app);
reactdom.render(<list />, app);
9）最后的package.json文件
{
"name": "csdndemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --hot"
},
"author": "",
"license": "isc",
"devdependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"html-webpack-plugin": "^2.28.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.14.1"
}
}
运行项目nam run dev
10)后续会有基于这个demo的测试enzyme库的使用，代码检测aslant，flux的使用，redux的使用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论