webstorm+react+webpack-demo

时间：2022-12-23 04:43:49

序言：通过这个小例子你也许、大概、可能会掌握以下几点

1、webstorm如何使用命令行

2、如何使用webpack的loaders把json格式的文件转化为javascript文件

3、如何使用不同的loaders把es6转换为浏览器可以识别的javascript文件

4、对于react而言如何使用合适的loaders把react的JSX文件转换为javascript文件

5、webpack的服务器启动后如何自动监听改动的文件以及浏览器如何自动刷新。

准备：安装好webstorm和nodejs

6、其他更加详细参考：这里

一、开始：

1、新建一个demo04文件夹为项目根目录，下面2个子文件夹分别是src和public

a:public目录下一个index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webstorm+react+webpack</title>

</head>

<body>

    <div id="app"></div>

    <script src="bundle.js"></script>

</body>

</html>

b:src目录下有

webstorm+react+webpack-demo

message.json代码是：

{

  "name":"Life",

  "do":"is a",

  "what":"gradient"

}

createdom.js是为了获取message.json的信息并创建dom，算是一个模块，代码如下

/**

 * Created by Administrator on 2016/11/12.

 */

var message=require('./message.json');

module.exports = function() {

    var greet=document.createElement('h1');

    greet.innerHTML="<span>"+message.name+"</span>"+"<span>"+message.do+"</span>"+"<span>"+message.what+"</span>";

    return greet;

};

entry.js是webpack的入口文件：

/**

 * Created by Administrator on 2016/11/12.

 */

require('./style.css');

var createdom = require('./createdom.js');

document.getElementById('app').appendChild(createdom());

style.css代码如下

body {

    min-height: 100%;

    overflow: hidden;

    background-color: #fff;

    /*background: rgba(37,38,33,.8);*/

    font-family: Arial;

}

h1 {

    font-family: arial;

    display: inline-block;

    margin: 0 auto;

    font-weight:;

    text-transform: uppercase;

    text-align: center;

    font-size: 9vw;

    line-height: 120%;

    padding: 300px 0;

    -webkit-animation: background 20s linear infinite;

    animation: background 20s linear infinite;

    background: -webkit-linear-gradient(0deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%);

    background: linear-gradient(90deg, rgba(150,48,30,1) 0%,rgba(199,201,88,1) 10%,rgba(28,147,46,1) 20%,rgba(74,165,168,1) 30%,rgba(89,90,165,1) 40%,rgba(84,16,67,1) 50%,rgba(28,58,63,1) 60%,rgba(82,175,183,1) 70%,rgba(78,170,76,1) 80%,rgba(150,48,30,1) 90%,rgba(199,201,88,1) 100%);

    background-size: 1000% 100%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}

span {

    display: block;

}

span:nth-child(1) {

    font-size: 214%;

    line-height: 85%;

    text-indent: -0.33em;

}

span:nth-child(2) {

    font-size: 292%;

    line-height: 69%;

    word-spacing: -0.2em;

    text-indent: -0.07em;

}

@-webkit-keyframes background {

    0%{background-position:0% 50%}

    100%{background-position:100% 50%}

}

@keyframes background {

    0%{background-position:0% 50%}

    100%{background-position:100% 50%}

}

(注：html内引入的bundle.js是webpack最终编译后自动生成的文件，暂时不必理会)

2、点击webstorm左下角的 Terminal 按钮弹出内置命令行，进入demo04根目录，如下图

webstorm+react+webpack-demo

输入：cnpm int快速建立：package.json文件，该文件是描述项目的详细信息。

3、分别几个依赖包(上一篇提到过css-loader和style-loader)。

在已经完成:cnpm install webpack -g之后继续下面

a:cnpm install --save-dev webpack

b:cnpm install --save-dev css-loader

c:cnpm install --save-dev style-loader

d:cnpm install --save-dev json-loader

json-loader是webpack把json文件编译成javascript

e:cnpm install --save-dev webpack-dev-server

安装webpack本地服务器依赖包，只要结合webpack.config.js配置好，你的浏览器会监测你的代码修改并且自动刷新！

下面就来创建这个配置文件~~

4、在demo04根目录创建webpack.config.js文件(webpack的默认的配置文件)，并输入如下代码：

/**

 * Created by Administrator on 2016/11/12

 */

var webpack = require('webpack');

module.exports = {

    //2、进出口文件配置

    entry:__dirname+'/src/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录

    output: {//输出

        path: __dirname+'/public',//输出路径

        filename: 'bundle.js'//输出文件名

    },

    module: {//在配置文件里添加JSON loader

        loaders: [

            {

                test: /\.json$/,

                loader: "json"

            },

            {//3、CSS-loader

                test:/\.css$/,

                loader:'style!css'//添加对样式表的处理

            }

        ]

    },

    //4、服务器依赖包配置

    devServer: {

        contentBase: "./public",//本地服务器所加载的页面所在的目录

        colors: true,//终端中输出结果为彩色

        historyApiFallback: true,//不跳转

        inline: true//实时刷新

    }

}

5、如何启动本地服务器？此时你的目录结构应该是

webstorm+react+webpack-demo

webstorm+react+webpack-demo

继续点击Terminal进入demo04目录输入：webpack

webstorm+react+webpack-demo

再执行：webpack-dev-server启动服务器

webstorm+react+webpack-demo

打开http://localhost:8080/。此时代码变动webpack会自动编译。浏览器会自动刷新，是不是有点神奇~

怎么到现在没提到react？别急，我们继续往下（http://localhost:8080/能正常打开没有出错的情况下）

二、继续上面的例子，这次用react和react-dom、babel，要先安装react和react-dom

demo04根目录执行

a:cnpm install --save react

b:cnpm install --save react-dom

Babel其实是一个编译JavaScript的平台，他可以帮你完成以下两点：

1)：把下一代的javascript标准(es6/7)编译为当前浏览器完全支持的javascript

2):使用基于JavaScript进行了拓展的语言，比如React的JSX

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

继续安装：

c:cnpm install --save-dev babel-core

d:cnpm install --save-dev babel-loader

e:cnpm install --save-dev babel-preset-es2015

f:cnpm install --save-dev babel-preset-react

1、更新webpack.config.js代码如下

/**

 * Created by Administrator on 2016/11/12

 */

var webpack = require('webpack');

module.exports = {

    //2、进出口文件配置

    entry:__dirname+'/src/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录

    output: {//输出

        path: __dirname+'/public',//输出路径

        filename: 'bundle.js'//输出文件名

    },

    module: {//在配置文件里添加JSON loader

        loaders: [

            {

                test: /\.json$/,

                loader: "json"

            },

            {//5、编译es6配置

                test:/\.js$/,

                exclude:/node_modules/,

                loader:'babel',//在webpack的module部分的loaders里进行配置即可

                query:{

                    presets:['es2015','react']

                }

            },

            {//3、CSS-loader

                test:/\.css$/,

                loader:'style!css'//添加对样式表的处理

            }

        ]

    },

    //4、服务器依赖包配置

    devServer: {

        contentBase: "./public",//本地服务器所加载的页面所在的目录

        colors: true,//终端中输出结果为彩色

        historyApiFallback: true,//不跳转

        inline: true//实时刷新

    }

}

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了

2、使用es6更新createdom.js，返回一个react组件

/**

 * Created by Administrator on 2016/11/12.

 */

//var message=require('./message.json');

//module.exports = function() {

//    var greet=document.createElement('h1');

//    greet.innerHTML="<span>"+message.name+"</span>"+"<span>"+message.do+"</span>"+"<span>"+message.what+"</span>";

//    return greet;

//};

//5、--------编译es6配置后跟新greeter.js如下--------------

import React,{Component} from 'react';

import config from './message.json';

class Greeter extends Component{

    render(){

        return(

            <div>

                <h1>

                    <span>{config.name}</span>

                    <span>{config.do}</span>

                    <span>{config.what}</span>

                </h1>

            </div>

        );

    }

}

export default Greeter

3、同样更新入口文件entry.js，使用react定义和渲染上面的模块

/**

 * Created by Administrator on 2016/11/12.

 */

//require('./style.css');

//var createdom=require('./createdom.js');

//document.getElementById('app').appendChild(createdom());

//5、编译es6配置后跟新main.js如下

import React from 'react';

import {render} from 'react-dom';

import Greeter from './createdom';

import './style.css';

render(<Greeter />,document.getElementById('app'));

执行:webpack 同样会在public下面创建一个bundle.js文件

执行：webpack-dev-server启动服务器，打开http://localhost:8080/如下

webstorm+react+webpack-demo

简单描述了如何使用webstorm和react以及webpack的一些简单配置。

最终如果在产品阶段的话，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS等等....。

 

webstorm+react+webpack-demo的更多相关文章

  1. scss &plus; react &plus; webpack &plus; es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

  2. 从DOM操作看Vue&amp&semi;React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  3. 部署React&plus;webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

  4. react &plus;webpack 配置px2rem

    项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...

  5. 真刀实战地搭建React&plus;Webpack&plus;Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  6. NodeJS &plus; React &plus; Webpack &plus; Echarts

    最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1.  在react里封装echarts组件,并调用后端API. (参考的 ...

  7. react&plus;webpack&plus;babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  8. 如何在react&amp&semi;webpack中引入图片？

    在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...

  9. react&plus;webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

随机推荐

  1. rabbitMQ学习（五）

    topic匹配模式,topic能满足匹配结果就行. 发送端: public class EmitLogTopic { private static final String EXCHANGE_NAME ...

  2. hdu 5718 Oracle 高精度

    Oracle Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Problem ...

  3. PHP流程控制语句

    流程控制语句分为两种(自己学到的就有俩不过在网上看还有两种) 1:条件控制语句即(if, if else , elseif , switch case) if语句不多说了,基本上大家都知道.if el ...

  4. mysql其他函数

    mysql,,); +---------------+ ,,) | +---------------+ | +---------------+ row in set (0.22 sec) mysql) ...

  5. Mysql修改id自增值

    如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从1开始计数 truncate table 表名 如果想保留之前的记录,从某一id(3356)重新开始 alter table 表名  ...

  6. oracle直接读写ms sqlserver数据库（一）如何下载oracle database gateway for sqlserver

    想从Oracle实时同步数据到Ms Sqlserver,需要在Oracle里面直连Sqlserver进行数据的读写,可以在Oracle服务器上安装oracle database gateway for ...

  7. MyBatis SQL语句操作Mysql

    本文记录使用Mybatis操作数据库时碰到的一些语句,供以后参考. 一,多条件查询 示意SQL语句:SELECT t_field1, t_field2 FROM table_name WHERE t_ ...

  8. &lbrack;EXP&rsqb;Drupal &lt&semi; 8&period;5&period;11 &sol; &lt&semi; 8&period;6&period;10 - RESTful Web Services unserialize&lpar;&rpar; Remote Command Execution &lpar;Metasploit&rpar;

    ## # This module requires Metasploit: https://metasploit.com/download # Current source: https://gith ...

  9. TensorFlow 2&period;0 新特性

    安装 TensorFlow 2.0 Alpha 本文仅仅介绍 Windows 的安装方式: pip install tensorflow==2.0.0-alpha0 # cpu 版本 pip inst ...

  10. Java 文件读写操作

    1[1]按字节读写,一次只读取一个字节,效率比较低 package bk1; import java.io.File; import java.io.FileInputStream; import j ...

相关文章