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中Object和Function的关系的三段简单代码
Jun 27 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
学习使用PHP数组
2006/10/09 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
Python切片操作实例分析
2018/03/16 Python
python3中zip()函数使用详解
2018/06/29 Python
Python闭包思想与用法浅析
2018/12/27 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
营销与策划专业求职信
2014/06/20 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
Nginx配置使用详解
2022/07/07 Servers
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers