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文件
7)最重要的webpack.config.js文件的配置
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:'index.html'
}),]
}
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:'index.html'
}),]
}
这个应该是最简单的配置了，不懂的可以网上搜，其中用到HtmlwebpackPlugin，
这个插件是帮我们自动生成html页面，并自动引入打包后的.js文件，其中的参数意思是，title这个页面的title，filename生成的页面名字
8）最后的项目文件目录为
list.js代码
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 (
);
}
}
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 (
-
{ListIt}
export default List;
