webpack打包react項(xiàng)目的實(shí)現(xiàn)方法

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:12:38

webpack打包react項(xiàng)目的實(shí)現(xiàn)方法

webpack打包react項(xiàng)目的實(shí)現(xiàn)方法:1webpack簡(jiǎn)介 webpack是目前最流行的打包工具之一，是一個(gè)為前端模塊打包構(gòu)建而生的工具，它既吸取了大量已有的方案優(yōu)點(diǎn)和教訓(xùn)，也解決了很多前端開(kāi)發(fā)過(guò)程中已有的痛點(diǎn)，如代碼的拆分與異步加載，對(duì)非js資源的支持，強(qiáng)大的loader設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀webpack打包react項(xiàng)目的實(shí)現(xiàn)方法:1webpack簡(jiǎn)介 webpack是目前最流行的打包工具之一，是一個(gè)為前端模塊打包構(gòu)建而生的工具，它既吸取了大量已有的方案優(yōu)點(diǎn)和教訓(xùn)，也解決了很多前端開(kāi)發(fā)過(guò)程中已有的痛點(diǎn)，如代碼的拆分與異步加載，對(duì)非js資源的支持，強(qiáng)大的loader設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平

1webpack簡(jiǎn)介

webpack是目前最流行的打包工具之一，是一個(gè)為前端模塊打包構(gòu)建而生的工具，它既吸取了大量已有的方案優(yōu)點(diǎn)和教訓(xùn)，也解決了很多前端開(kāi)發(fā)過(guò)程中已有的痛點(diǎn)，如代碼的拆分與異步加載，對(duì)非js資源的支持，強(qiáng)大的loader設(shè)計(jì)使得它更像是一個(gè)構(gòu)建平臺(tái)，而不是打包工具。

2webpack,react開(kāi)發(fā)環(huán)境

1）新建一個(gè)項(xiàng)目文件夾,進(jìn)入此文件夾，創(chuàng)建package.json文件(npm init命令)

2）確認(rèn)已安裝webpack,web pack-dev-server模塊

3）安裝babel（babel不懂的請(qǐng)先看https://www.gxlcms.com/article/142362.htm）babel的目的有兩個(gè)(將es6轉(zhuǎn)為es5,轉(zhuǎn)換jsx語(yǔ)法)，

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'
 }),
 ]
}

這個(gè)應(yīng)該是最簡(jiǎn)單的配置了，不懂的可以網(wǎng)上搜，其中用到HtmlwebpackPlugin，

這個(gè)插件是幫我們自動(dòng)生成html頁(yè)面，并自動(dòng)引入打包后的.js文件，其中的參數(shù)意思是，title這個(gè)頁(yè)面的title，filename生成的頁(yè)面名字

8）最后的項(xiàng)目文件目錄為

app是項(xiàng)目組件文件夾，test是測(cè)試文件

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];//合并數(shù)值
 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="請(qǐng)輸入" 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"
 }
}

運(yùn)行項(xiàng)目nam run dev

10)后續(xù)會(huì)有基于這個(gè)demo的測(cè)試enzyme庫(kù)的使用，代碼檢測(cè)aslant，flux的使用，redux的使用

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com