webstorm+react+webpack-demo

準備：安裝好webstorm和nodejs

一、開始：

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目錄下有

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: 900;
    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根目錄，如下圖

輸入：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、如何啟動本地服務器？此時你的目錄結構應該是

繼續點擊Terminal進入demo04目錄輸入：webpack

再執行：webpack-dev-server啟動服務器

打開https://localhost:8080/。此時代碼變動webpack會自動編譯。瀏覽器會自動刷新，是不是有點神奇~

怎麼到現在沒提到react？別急，我們繼續往下（https://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啟動服務器，打開https://localhost:8080/如下

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

最終如果在產品階段的話，可能還需要對打包的文件進行額外的處理，比如說優化，壓縮，緩存以及分離CSS和JS等等....。

最後更新：2017-11-05 11:35:07

webstorm+react+webpack-demo

上一篇：關於移動端meta設置（未完待續）

下一篇：移動端基礎事件和交互(未完待續)

相關內容

熱門內容

最新內容

webstorm+react+webpack-demo

上一篇： 關於移動端meta設置（未完待續）

下一篇： 移動端基礎事件和交互(未完待續)

相關內容

熱門內容

最新內容

上一篇：關於移動端meta設置（未完待續）

下一篇：移動端基礎事件和交互(未完待續)