webpack打包調試react並使用babel編譯jsx配置方法

時間 2019-11-18

標籤 webpack 打包調試 react 並使 babel 編譯 jsx 配置方法欄目 React 简体版

原文原文鏈接

http://lxj8749.iteye.com/blog/2287074css

**********************************************html

安裝webpacknode

npm i webpack --save-dev react

若是使用 -g參數，能夠安裝到全局使用，在當前目錄安裝，可執行文件爲 ./node_modules/.bin/webpackwebpack

配置webpack.config.jsgit

    var path = require('path');  
    module.exports = {  
        entry: path.resolve(__dirname, 'src/index.js'),  
        output: {  
            path: path.resolve(__dirname, 'build'),  
            filename: 'bundle.js',  
        },  
    };

entry爲打包的入口文件，output爲打包後生成的文件名及路徑。es6

源代碼能夠編寫成多個文件，而後由入口文件調用組裝，相互獨立的組件最好分別單獨寫在一個文件中github

打包源文件web

在當前目錄執行webpack 或 ./node_modules/.bin/webpack 命令，就能夠將源文件打成生成build/bundle.js文件，網頁中直接做用<script src="build/bundle.js"></script>來調用便可npm

本地開發調試

先安裝 webpack-dev-server

npm i webpack-dev-server --save

在package.json文件中scripts下面添加相應的配置（能夠使用npm init來生成package.json文件）

    {  
      "scripts": {  
        "build": "webpack",  
        "dev": "webpack-dev-server  --port 8080  --inline --content-base ./build"  
      }  
    }

--inline加入該參數能夠實現自動刷新，

在當前目錄執行 npm run dev,執行完成後，在文件夾build中新建index.html，加入以下代碼

    <!doctype html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>tests</title>  
    </head>  
    <body>  
    <div id="react-content"></div>  
    <script src="./bundle.js"></script>  
    </body>  
    </html>

在瀏覽器中打開 http://localhost:8080 就能夠實時查看效果，修改後代碼後，須要刷新才能查看到效果。執行npm run build能夠打包，至關於執行webpack命令

Cannot GET / 錯誤

是因爲package.json中的

"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

build文件夾不存在

配置react和babel

安裝react

npm install react --save

安裝babel相關組件，讓webpack自動轉換jsx，

npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

在webpact.config.js的module的loaders中增長相應配置

    module: {  
          loaders: [  
            {  
              test: /\.jsx?$/,  
              exclude: /(node_modules|bower_components)/,  
              loader: 'babel', // 'babel-loader' is also a legal name to reference  
              query: {  
                presets: ['react', 'es2015']  
              }  
            }  
          ]  
     }

配置完成後，在js或jsx文件中就能夠直接寫jsx語法

babel編譯es6和jsx

先安裝babel-cli

npm install -g babel-cli

再執行

babel src -d dist --presets react,es2015

src 爲源文件目錄，dist爲編譯輸出目錄，--presets 預置插件

支持es7語法

es7語法分四個階段分別對應四個插件

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

選擇一個加載就能正確解析es7語法

配置.less

先安裝less編譯器

npm install less css-loader less-loader style-loader --save-dev

在webpact.config.js的module的loaders中增長相應配置

{test: /\.less$/,loader: "style!css!less"}

配置圖片及字體文件

安裝url-loader,修改webpact.config.js的module的loaders中增長相應配置

    {test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}

react,babel只能安裝在當前目錄，安裝在全局無效，提交到github時須要把這些模塊排除掉

npm安裝依賴

在當前目錄執行npm install會根據當前目錄下的package.json文件，把須要的依賴都下載安裝

npm升級到3

npm install npm@3.0

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鳥教程 React 實例</title>
  </head>
  <body>
    <div id="example"></div>
    <script src="bundle.js"></script>
  </body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'uxcore';

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

const path = require('path');

module.exports = {
  entry: './src/index.jsx',
  
      module: {  
          loaders: [  
            {  
              test: /\.jsx?$/,  
              exclude: /(node_modules|bower_components)/,  
              loader: 'babel-loader', // 'babel-loader' is also a legal name to reference  
              query: {  
                presets: ['react', 'es2015']  
              }  
            }  
          ]  
     }  ,
     
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};