react學習筆記一 Webpack+Babel+React實現一個demo

時間 2019-11-10

標籤 react 學習筆記 webpack+babel+react webpack babel 實現一個 demo 欄目 React 简体版

原文原文鏈接

最近今天一直聽同窗說webpack，react等js，都是如今比較火的js，因此就作了一個小簡單的小democss

首先須要安裝node.js,由於須要用的npmhtml

生成package.json （package.json文件描述了一個NPM包的全部相關信息，包括做者、簡介、包依賴、構建等信息）node

$npm init //按提示生成package.json

package.json
react

{
  "name": "reactdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "jsx-loader": "^0.13.2",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0"
  }
}

如指定依賴的其它包，這些依賴是指包發佈後正常執行時所須要的，若是是開發中依賴的包，能夠在devDependencies設置。webpack

npm安裝package.json時直接轉到當前項目目錄下用命令npm install 或npm install --save-dev安裝便可，自動將package.json中的模塊安裝到node-modules文件夾下web

安裝webpacknpm

$npm install webpack -g //全局
$npm install webpack-server-dev --save-dev // 進入到項目文件下

安裝所須要的包json

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react url-loader css-loader style-order --save-dev

main.jsx
服務器

require("./css/style.css");//引入css文件
var React = require("react");
var ReactDOM = require("react-dom");

var HelloMessage = React.createClass({
    render: function () {
        return <div > < figure >
            < img src = 'images/bg.jpg' /> < /figure> < img src = 'images/ewm.png'
        className = "ewm" /></div >
    }
});

ReactDOM.render( < HelloMessage / > ,
    document.getElementById('example')
);

index.htmlbabel

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
</head>
<body>
    <div id="example"></div>
</body>
<script src="bundle.js"></script>
</html>

webpack.config.js

module.exports = {
  entry: './main.jsx',//入口文件
  output: {
    filename: 'bundle.js'//輸出文件
  },
  module: {
    loaders:[
	{ test: /\.css$/, loader: 'style-loader!css-loader' },
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
	  { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
};

執行打包

webpack //直接打包
webpack -dev-server //發佈到服務器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。