webpack + react 創(chuàng)建項目

一诸衔、前期準備

創(chuàng)建新的文件夾：

mkdir react-webpack-demo

切換到react-webpack-demo文件夾下面，生成packge.json配置文件

cd react-webpack-demo
npm init

在該目錄下創(chuàng)建文件夾目錄大致如下：

其中集乔，build用于存放webpack打包的文件去件，.babelrc是babel的配置文件，webpack.config.js是webpack的配置文件扰路，之后都需要尤溜，這里先創(chuàng)建。

二汗唱、下載插件

安裝webpack：

npm i --save-dev webpack webpack-dev-server

這里的webpack-dev-server是用來開啟本地服務器的宫莱，后文會介紹具體配置方法。

安裝react哩罪，

npm i --save-dev react react-dom

安裝babel-loader：因為現在項目基本都用到了es2015授霸，所以我們需要下載將es6轉換成瀏覽器可以識別的js：

npm install --save-dev babel-loader babel-core babel-preset-env

按照我們之前的步驟，默認都是安裝最新的插件际插。

但是如果你項目有特殊要求碘耳，webpack版本不一樣，也需要下載對應的babel-loader版本腹鹉，規(guī)則如下：

webpack 1.x | babel-loader <= 6.x

webpack 2.x |?babel-loader >= 7.x (recommended) (^6.2.10 will also work, but with deprecation warnings)

webpack 3.x | babel-loader >= 7.1

同樣需要轉換react（jsx）的插件:

npm install --save-dev babel-preset-react

三藏畅、配置文件

webpack.config.js?

var path=require('path');  //node 自帶的path
module.exports={
? ? entry:path.resolve(__dirname,'app/index.jsx'),  //獲取到當前文件夾下面的index.jsx為入口文件
? ? output:{
? ? ?  path:path.resolve(__dirname,'build'),  //webpack打包輸入路徑
? ? ?  filename:'bundle.js',                  //輸入包的名字
    }，
    modules {                                 //對webpack loader文件的規(guī)則約束
       rules: [{
           test: /\.js|jsx$/，           
           use:{
               loader：'babel-loader'
           }
       }]
    }
}

這里說明一下愉阎，這里modules的文件配置绞蹦，是為了讓webpack利用babel-loader識別js和jsx文件，當然如果要識別css,png文件等只要在rules里面繼續(xù)配置榜旦，具體的可以查看官方文檔幽七。

package.json，在script中定義快捷指令：

"start":"webpack-dev-server --progress --color",
"build":"webpack --config ./webpack.config.js --progress --color"

.babelrc

{
  "presets":[
     "env","react"
  ]
}

四溅呢、打包

這個時候我們就可以打包了

npm run build

當出現這樣的就說明你打包成功了澡屡，也可以在bundle文件夾下面看到bundle.js文件

五、本地服務器運行網頁

為了做一個有點意思的網頁咐旧，我們在之前創(chuàng)建的index.jsx文件中寫入：

import React from 'react';
import {render} from 'react-dom';

export default class App extends React.Component{
? ? render(){
? ? ? ? return(
? ? ? ? ?  <div style={{height:'700px',width:'100%',backgroundColor:'pink'}}>
? ? ?   ? ? ?  Great, u successed!
           </div>
        )
     }
}

render(
  <App />,
  document.getElementById('root')
)

index.html

<!DOCTYPE html>
<html>
? <head>
? ? <meta charset=“utf-8”>
? ? <title>react-webpack-demo</title>
? </head>
? <body>
    <div id="root"></div>
? </body>
</html>

這里我們就需要用上webpack-dev-server開啟服務器驶鹉，這里需要引入html-webpack-loader：

npm i --save-dev html-webpack-loader

同時介紹一個打開瀏覽器的插件open-browser-webapck-plugin

npm i --save-dev open-browser-webpack-plugin

webpack.config.js現配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserWebpackPlugin = require('open-browser-webpack-plugin');

module.exports={
? ......
? plugins:[
? ? new HtmlWebpackPlugin({
? ? ?  template:__dirname+'/app/index.html',
? ? }),
? ? new OpenBrowserWebpackPlugin({
? ? ?  url:'http://localhost:8080',
? ? })
? ]
}

現在，輸入

npm start

就可以看到如下效果了：

最后铣墨，別問我為啥用大粉因為好看室埋！

--------------------------------------------------------------------------------------------------

--------------------------------------------分割線---------------------------------------------

聽說百度的人都加班到10點，那我起碼也得10點01吧.............