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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 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
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php获取微信openid方法总结
2019/10/10 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js活用事件触发对象动作
2008/08/10 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
js实现简单模态框实例
2018/11/16 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python正则表达式常用函数总结
2017/06/24 Python
python+opencv实现阈值分割
2018/12/26 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
keras topN显示,自编写代码案例
2020/07/03 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
制定岗位职责的原则
2013/11/08 职场文书
企划主管岗位职责
2013/12/12 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
初中生评语大全
2014/04/24 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
看上去很美观后感
2015/06/10 职场文书