1webpack简介
webpack是目前最流行的打包工具之一,是一个为前端模块打包构建而生的工具,它既吸取了大量已有的方案优点和教训,也解决了很多前端开发过程中已有的痛点,如代码的拆分与异步加载,对非js资源的支持,强大的loader设计使得它更像是一个构建平台,而不是打包工具。
2webpack,react开发环境
1)新建一个项目文件夹,进入此文件夹,创建package.json文件(npm init命令)
2)确认已安装webpack,web pack-dev-server模块
3)安装babel(babel不懂的请先看https://ponent { 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的使用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。