重溫 Webpack, Babel 和 React
開始之前
在書寫文章之前，我假設大家已經有了 JavaScript，Node 包管理工具，Linux 終端操作 這些基本技能，接下來，我將一步一步指引大家從頭搭建一個 React 專案
最終實現的效果
我們將使用 Webpack 和 Babel 搭建一個 React 應用，我們的目的很清晰，就是 更好的理解和掌握這些工具的使用
我們建立的應用程式既要做到 最小，也要遵循 最佳實踐，為不是特別熟練的同學鞏固一下基礎
初始化
建立你的專案，並新增的你的配置檔案 package.json
mkdir webpack-babel-react-revisited cd webpack-babel-react-revisited yarn init
Webpack
我們首先安裝 Webpack，它是目前非常流行的 模組打包器，它將應用程式包含的每個模組打包成少量的 塊，以便這些程式碼從伺服器載入到瀏覽器中
yarn add webpack --dev接下來，我們開始書寫一些模組。我們將原始檔 app.js 儲存到 src 目錄中
/** app.js */
console.log('Hello from 楓上霧棋!');然後，我們跑一下 Webpack
./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.js如果你開啟生成的 app.bundle.js
webpack 的模組處理程式碼，下面是我們書寫的 console.log
這條指令是將我們的 app.js 作為 Webpack 的 入口檔案，將結果輸出到 dist 資料夾中，指令有些冗長，在實際開發中，我們使用 webpack 配置檔案來代替，為了文件結構看起來更加清晰，參考 目錄 如下
├── config
│ ├── paths.js
│ ├── webpack.config.prod.js
├── src
│ ├── app.js
├── package.json下面是參考 配置
paths.js
const path = require('path');
const fs = require('fs');const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);module.exports = {
appDist: resolveApp('dist'),
appSrc: resolveApp('src'),
};<p>這個檔案不是必須的，但在專案增大後，它的意義就瞬間出來了</p> <p><code>webpack.config.prod.js</code></p> <pre><code class="javascipt">const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const paths = require('./paths'); const plugins = [ new HtmlWebpackPlugin({ title: 'webpack babel react revisited', filename: path.join(paths.appDist, 'index.html'), }), ]; const config = { entry: { app: path.join(paths.appSrc, 'app'), }, output: { path: paths.appDist, filename: 'assets/js/[name].js', }, resolve: { extensions: ['.js', '.jsx'], }, plugins, }; module.exports = config;這裡我們還添加了一個 html-webpack-plugin，它簡化了我們
HTML檔案的建立，安裝我們就不再這裡贅述了，如果還不知道的同學可以點選連結檢視其中，我們還使用了一個
語法糖，這樣在我們匯入.js，.jsx時就不需要指定副檔名了接下來，我們指定配置檔案再跑一下
Webpack./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.js發現除了實現上面的效果外，還自動幫我們生成了一個
index.html，我們可以點選這個html，在控制檯中檢視效果，相比上面，是不是方便了很多當然，最後我們肯定也不是使用這種方式來
build，開啟package.json，新增如下指令碼命令，然後執行yarn build，是不是瞬間感覺nice了很多"scripts": { "clean": "rimraf dist *.log .DS_Store", "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress" }Webpack dev server
除此之外，
Webpack為我們提供了一個的dev server，它還支援模組熱替換首先，安裝
webpack-dev-serveryarn add --dev webpack-dev-server在
config目錄中新增配置檔案webpack.config.dev.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');const paths = require('./paths');
const hostname = process.env.HOST || 'localhost';
const port = process.env.PORT || 3000;const plugins = [
new HtmlWebpackPlugin({
title: 'webpack babel react revisited',
filename: path.join(paths.appDist, 'index.html'),
}),
new OpenBrowserPlugin({ url:http://${hostname}:${port}}),];const config = {
entry: {
app: path.join(paths.appSrc, 'app'),
},
output: {
path: paths.appDist,
filename: 'assets/js/[name].js',
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins,
devServer: {
contentBase: paths.appDist,
compress: true,
port,
},
};module.exports = config;
<p>在 <code>webpack.config.prod.js</code> 的基礎上，我們增加了 <a href="https://github.com/baldore/open-browser-webpack-plugin" rel="nofollow noreferrer">open-browser-webpack-plugin</a> 外掛和 <code>devServer</code> 配置，<code>open-browser-webpack-plugin</code> 外掛顧名思義，會幫我們自動開啟 <code>dev server</code> 最後返回給我們的地址</p> <p>更新 <code>package.json</code></p>"scripts": {
"clean": "rimraf dist *.log .DS_Store",
"webpack:dev":
"NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress",
"webpack:prod":
"NODE_ENV=production webpack --config config/webpack.config.prod.js --progress",
"start": "yarn run clean && yarn run webpack:dev",
"build": "yarn run clean && yarn run webpack:prod"
}<p>現在，我們就可以通過如下方式來啟動</p>yarn start
<p>啟動後，有沒有瞬間感覺很棒</p> <h2>Babel</h2> <p>為了能夠使用 <code>ES6</code> 以及更高版本，我們需要一個 <code>轉換編譯器</code>，我們選擇 <code>Babel</code>，它能將 <code>ES6</code> 轉換成可以在瀏覽器中執行的程式碼，除此之外，他還內建了 <code>React JSX</code> 擴充套件，可以說它的出現推動了 <code>JavaScipt</code> 的發展</p> <p>所有，我們安裝下面這些依賴包</p>yarn add --dev babel-loader babel-core babel-preset-env babel-preset-react
<p>建立 <code>Babel</code> 預設配置檔案 <code>.babelrc</code></p>{
"presets": ["env", "react"]
}<p>這個是告訴 <code>Babel</code> 用我們剛剛安裝的兩個 <code>presets</code></p> <p>接下來，更新 <code>webpack</code> 配置檔案</p> <pre><code class="javascipt">config.module = { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'], }, ], }更新以後，雖然看不到什麼變化，但事實上我們可以使用
ES6了React
最後，我們來新增
React，這也可能是你閱讀這篇文章的原因首先，我們還是先安裝它
yarn add react react-dom用下面程式碼替換
console.log
import React, { Component } from 'react';
import { render } from 'react-dom';export default class Hello extends Component {
render() {
return <h1>Hello from 楓上霧棋!</h1>;
}
}render(<Hello />, document.getElementById('app'));
<p>因為要新增 <code><div id="app"></div></code>，所以我們要修改一下 <code>html-webpack-plugin</code> 的配置</p>new HtmlWebpackPlugin({
template: path.join(paths.appSrc, 'index.html'),
}),
```參考
template如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>webpack babel react revisited</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="app"></div> </body> </html>接下來，就是見證奇蹟的時刻
重新啟動服務，你有沒有發現搭建一個
React應用程式就這麼簡單接下來，大家就可以
自行探索，新增更多的東西來適應自身應用程式的需要下面再補充一下如何新增
CSS和圖片CSS
每個 web 應用程式都離不開
CSS，我們在src目錄中建立style.cssbody, html, #app { margin: 0; width: 100%; height: 100%; } #app { padding: 30px; font-family: '微軟雅黑'; }將其新增到應用程式中我們需要使用 css-loader
如果想將
css注入style標籤中，我們還需要 style-loader，通常，是將這兩個結合使用我們使用 extract-text-webpack-plugin 將其解壓到外部
為此，我們首先安裝
yarn add --dev css-loader style-loader extract-text-webpack-plugin然後在
app.js中匯入style.css
import './style.css';<p>最後更新 <code>webpack</code> 配置檔案</p> <pre><code class="javascipt">config.module = { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }), }, ], } config.plugins.push([ new ExtractTextPlugin("styles.css"), ])看起來稍顯複雜，但是大功告成，為了更好地使用它，我們都得經歷這個過程
重新啟動服務，你會發現你的
dist目錄中多了一個styles.css圖片
最後我們增加 file-loader 來處理我們引入的圖片等檔案
首先，安裝
file-loaderyarn add --dev file-loader我們在
src/images中放入一張圖片，在app.js中匯入
import avatar from './images/avatar.jpg';export default class Hello extends Component {
render() {
return (
<div>
<img src={avatar} alt="avatar" style={{ width: 400, height: 250 }} />
</div>
);
}
}<p>更新 <code>webpack</code> 配置檔案</p> <pre><code class="javascipt">config.module = { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/images/', }, }, ], }, ], }重啟服務，哈哈
總結
如果有什麼問題，可以檢視 webpack-babel-react-revisited 倉庫
現在，大家對搭建
React應用程式是不是感覺輕鬆了很多，但React整個技術棧並不止包括這些，還有Redux，React Router，單元測試，程式碼校驗等內容，關於React其他內容，歡迎檢視日誌其他文章原文連結：Setting up Webpack, Babel and React from scratch, revisited