基於webpack的React項目搭建(一)
前言
工欲善其事，必先利其器。為了更好的學習React，我們先簡要的把開發環境搭建起來。本文主要介紹使用webpack搭建React項目，如果你對React或es6的基礎語法還不了解，建議先去學習學習。
-
基礎環境
node/npm
-
webpack
現代JavaScript程序應用的模塊打包器。它主要分析你的項目結構，找到JavaScript模塊以及其他一些瀏覽器不能直接運行的拓展語言（Scss、less、TypeScript），將其轉換和打包為合適的格式供瀏覽器使用。
-
項目創建
創建一個文件夾first-react，進入該目錄，在該目錄下打開一個終端，執行npm init。根據提示輸入內容，也可以直接按回車鍵跳過。執行完後目錄中會多一個package.json文件，這是項目的核心文件，包含包依賴管理和腳本任務。
mkdir first-react cd first-react npm init
-
安裝react, react-dom, webpack
在項目根目錄下執行下面命令，其中--save的含義是項目上線運行所需的包，即生產環境（--save-dev是開發環境所需的包）。
npm install react react-dom webpack --save
-
項目目錄和源碼
--your project
|--build(項目打包輸出目錄)
|--bundle.js(該文件是由webpack打包生成)
|--index.html
|--src
|--index.js
|--webpack
|--webpack.config.js
|--package.json index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> /* react DOM*/ </div> <script src="../build/bundle.js"></script> </body> </html>
index.js
import React, { Component } from ‘react‘;
import { render } from ‘react-dom‘;
render(
<div>Hello React!</div>,
document.getElementById(‘app‘)
);
webpack.config.js
const path = require(‘path‘); module.exports = { entry: path.resolve(__dirname, ‘../src/index.js‘), //指定入口文件，程序從這裏開始編譯,__dirname當前根目錄, ../表示上一級目錄, ./同級目錄 output: { path: path.resolve(__dirname, ‘../build‘), // 輸出的路徑 filename: ‘bundle.js‘ // 編譯後文件 }, module: { rules: [ { test: /\.(js|jsx)$/, use: { loader: ‘babel-loader‘, options: { presets: [‘es2015‘, ‘react‘], } }, exclude: /node_modules/ } ] } }
這裏如果在項目根目錄直接進行webpack構建會報錯(構建命令：webpack --config webpack/webpack.config.js)，因為我們使用了react，react是使用jsx語法實現的，而jsx不能直接被瀏覽器識別和執行，所以這裏需要引入Babel庫進行轉碼。
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
babel-loader: babel加載器
babel-preset-es2015: 支持es2015
babel-preset-react: jsx 轉換成js
最後再次進行構建，然後點擊build/index.html，即可看到Hello React！
webpack --config webpack/webpack.config.js // 更多webpack命令盡在webpack --help查閱
接下來我們進行一下簡單的優化，執行效果一致。
index.js
import React from ‘react‘; import { render } from ‘react-dom‘; import App from ‘./App‘ const renderDom = Component => { render( <Component />, document.getElementById(‘app‘) ); } renderDom(App);
在項目根目錄下新建json文件.babelrc，將babel的配置單獨提取出來。
{
"presets": [
"es2015",
"react"
]
}
webpack.config.js文件作相應的調整。
const path = require(‘path‘); const webpack = require(‘webpack‘); module.exports = { entry: path.resolve(__dirname, ‘../src/index.js‘), //指定入口文件，程序從這裏開始編譯,__dirname當前根目錄, ../表示上一級目錄, ./同級目錄 output: { path: path.resolve(__dirname, ‘../build‘), // 輸出的路徑 filename: ‘bundle.js‘ // 編譯後文件 }, module: { rules: [ { test: /\.(js|jsx)$/, loader: ‘babel-loader‘, exclude: /node_modules/ } ] } }
在src下新建App.js。
import React, { Component } from ‘react‘;
export default class App extends Component {
render() {
return (
<div>Hello React!</div>
);
}
}
-
以腳本方式執行構建
編輯package.json，加入自定義腳本，在項目根目錄執行npm run dev即可達到上面一樣的效果。
"scripts": {
"dev": "webpack --config webpack/webpack.config.js"
}
-
搭建前端服務器
可以發現，每次都要重新構建然後刷新index.html，才能得到最新的效果，開發效率極低。幸好webpack-dev-server可以幫助我們解決這個問題，webpack-dev-server是一個小型的靜態文件服務器，為webpack打包的資源文件提供Web服務。並且提供自動刷新和Hot Module Replacement（模塊熱替換：前端代碼變動後無需刷新整個頁面，只把變化的部分替換掉）。OK，讓我們開始安裝和配置webpack-dev-server。
npm install webpack-dev-server --save
在項目根目錄下創建bin目錄，進入bin目錄，創建devserver.js文件，編輯如下
‘use strict‘ const WebpackDevServer = require(‘webpack-dev-server‘); const config = require(‘../webpack/webpack.config‘); const webpack = require(‘webpack‘); const path = require(‘path‘); const compiler = webpack(config); const server = new WebpackDevServer(compiler, { contentBase: path.resolve(__dirname, ‘../build‘), //默認會以根文件夾提供本地服務器，這裏指定文件夾 historyApiFallback: true, //在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html port: 9090, //如果省略，默認8080 publicPath: "/" }); server.listen(9090, ‘localhost‘, function (err) { if (err) throw err })
編輯package.json，創建一條腳本
"scripts": {
"dev": "node bin/devserver"
}
最後，單獨在該項目根目錄起一個終端，執行npm run dev，啟動成功後訪問http://localhost:9090。如果看到Hello React!，恭喜你。 最後再做一下簡單的測試，將App.js修改如下後保存，可以發現，項目會自動重新編譯運行，刷新瀏覽器即可看到最新的更改。好了，暫時先寫這麽多。
import React, { Component } from ‘react‘;
export default class App extends Component {
render() {
return (
<div>
<h1>Hello React</h1>
<h2>Hello React</h2>
</div>
);
}
}
基於webpack的React項目搭建(一)