Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

webpack打包react项目的实现方法

来源:中文源码网    浏览:182 次    日期:2024-03-27 03:15:03
【下载文档:  webpack打包react项目的实现方法.txt 】


webpack打包react项目的实现方法
1webpack简介
webpack是目前最流行的打包工具之一,是一个为前端模块打包构建而生的工具,它既吸取了大量已有的方案优点和教训,也解决了很多前端开发过程中已有的痛点,如代码的拆分与异步加载,对非js资源的支持,强大的loader设计使得它更像是一个构建平台,而不是打包工具。
2webpack,react开发环境
1)新建一个项目文件夹,进入此文件夹,创建package.json文件(npm init命令)
2)确认已安装webpack,web pack-dev-server模块
3)安装babel(babel不懂的请先看http://www.zwyuanma.com/article/142362.htm)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:'index.html'
}),
]
}
这个应该是最简单的配置了,不懂的可以网上搜,其中用到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 (

);
});
return (




    {ListIt}


);
}
}
export default List;
listitem.js
import React from 'react';
class ListItem extends React.Component {
render() {
const text = this.props.name;
return (
  • this.props.onDelete(text.id)}>
    {text.text}

  • )
    }
    }
    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(, 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的使用
    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。

    相关内容