webpack打包react项目的实现方法


Posted in Javascript onJune 21, 2018

1webpack简介

webpack是目前最流行的打包工具之一,是一个为前端模块打包构建而生的工具,它既吸取了大量已有的方案优点和教训,也解决了很多前端开发过程中已有的痛点,如代码的拆分与异步加载,对非js资源的支持,强大的loader设计使得它更像是一个构建平台,而不是打包工具。

2webpack,react开发环境

1)新建一个项目文件夹,进入此文件夹,创建package.json文件(npm init命令)

2)确认已安装webpack,web pack-dev-server模块

3)安装babel(babel不懂的请先看https://3water.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)最后的项目文件目录为

webpack打包react项目的实现方法

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的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 #Javascript
详解如何使用webpack打包JS
Jun 21 #Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
浅析Vue 生命周期
Jun 21 #Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
You might like
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
python实现的解析crontab配置文件代码
2014/06/30 Python
Python读写Excel文件方法介绍
2014/11/22 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python生成器推导式用法简单示例
2019/10/08 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
见习期自我鉴定
2013/11/07 职场文书
岗位职责说明书模板
2014/07/30 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Go语言 详解net的tcp服务
2022/04/14 Golang
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js