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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
浅析javascript函数表达式
Feb 10 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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 $_ENV为空的原因分析
2009/06/01 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python List cmp()知识点总结
2019/02/18 Python
python 实现两个线程交替执行
2020/05/02 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python Http请求json解析库用法解析
2020/11/28 Python
Python实现粒子群算法的示例
2021/02/14 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
关于赌博的检讨书
2014/01/24 职场文书
2015年推普周活动总结
2015/03/27 职场文书
同事离别感言
2015/08/04 职场文书