重溫 Webpack, Babel 和 React

01-29

開始之前

在書寫文章之前，我假設大家已經有了 JavaScript，Node 包管理工具，Linux 終端操作這些基本技能，接下來，我將一步一步指引大家從頭搭建一個 React 項目

最終實現的效果

我們將使用 Webpack 和 Babel 搭建一個 React 應用，我們的目的很清晰，就是更好的理解和掌握這些工具的使用

我們創建的應用程序既要做到最小，也要遵循最佳實踐，為不是特別熟練的同學鞏固一下基礎

初始化

創建你的項目，並添加的你的配置文件 package.json

mkdir webpack-babel-react-revisitedncd webpack-babel-react-revisitednnyarn initn

Webpack

我們首先安裝 Webpack，它是目前非常流行的模塊打包器，它將應用程序包含的每個模塊打包成少量的塊，以便這些代碼從伺服器載入到瀏覽器中

yarn add webpack --devn

接下來，我們開始書寫一些模塊。我們將源文件 app.js 保存到 src 目錄中

/** app.js */nnconsole.log(Hello from 楓上霧棋!);n

然後，我們跑一下 Webpack

./node_modules/webpack/bin/webpack.js ./src/app.js --output-filename ./dist/app.bundle.jsn

如果你打開生成的 app.bundle.js，你會發現上面是 webpack 的模塊處理代碼，下面是我們書寫的 console.log

這條指令是將我們的 app.js 作為 Webpack 的入口文件，將結果輸出到 dist 文件夾中，指令有些冗長，在實際開發中，我們使用 webpack 配置文件來代替，為了文檔結構看起來更加清晰，參考目錄如下

├── confign│ ├── paths.jsn│ ├── webpack.config.prod.jsn├── srcn│ ├── app.jsn├── package.jsonn

下面是參考配置

paths.js

const path = require(path);nconst fs = require(fs);nnconst appDirectory = fs.realpathSync(process.cwd());nconst resolveApp = relativePath => path.resolve(appDirectory, relativePath);nnmodule.exports = {n appDist: resolveApp(dist),n appSrc: resolveApp(src),n};n

這個文件不是必須的，但在項目增大後，它的意義就瞬間出來了

webpack.config.prod.js

這裡我們還添加了一個 html-webpack-plugin，它簡化了我們 HTML 文件的創建，安裝我們就不再這裡贅述了，如果還不知道的同學可以點擊鏈接查看

其中，我們還使用了一個語法糖，這樣在我們導入 .js，.jsx 時就不需要指定擴展名了

接下來，我們指定配置文件再跑一下 Webpack

./node_modules/webpack/bin/webpack.js --config config/webpack.config.prod.jsn

發現除了實現上面的效果外，還自動幫我們生成了一個 index.html，我們可以點擊這個 html，在控制台中查看效果，相比上面，是不是方便了很多

當然，最後我們肯定也不是使用這種方式來 build，打開 package.json，添加如下腳本命令，然後執行 yarn build，是不是瞬間感覺 nice 了很多

"scripts": {n "clean": "rimraf dist *.log .DS_Store",n "build": "yarn run clean && webpack --config config/webpack.config.prod.js --progress"n}n

Webpack dev server

除此之外，Webpack 為我們提供了一個的 dev server，它還支持模塊熱替換

首先，安裝 webpack-dev-server

yarn add --dev webpack-dev-servern

在 config 目錄中添加配置文件 webpack.config.dev.js

在 webpack.config.prod.js 的基礎上，我們增加了 open-browser-webpack-plugin 插件和 devServer 配置，open-browser-webpack-plugin 插件顧名思義，會幫我們自動打開 dev server 最後返回給我們的地址

更新 package.json

"scripts": {n "clean": "rimraf dist *.log .DS_Store",n "webpack:dev":n "NODE_ENV=development webpack-dev-server --config config/webpack.config.dev.js --progress",n "webpack:prod":n "NODE_ENV=production webpack --config config/webpack.config.prod.js --progress",n "start": "yarn run clean && yarn run webpack:dev",n "build": "yarn run clean && yarn run webpack:prod"n}n

現在，我們就可以通過如下方式來啟動

yarn startn

啟動後，有沒有瞬間感覺很棒

Babel

為了能夠使用 ES6 以及更高版本，我們需要一個轉換編譯器，我們選擇 Babel，它能將 ES6 轉換成可以在瀏覽器中運行的代碼，除此之外，他還內置了 React JSX 擴展，可以說它的出現推動了 JavaScipt 的發展

所有，我們安裝下面這些依賴包

yarn add --dev babel-loader babel-core babel-preset-env babel-preset-reactn

創建 Babel 默認配置文件 .babelrc

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

這個是告訴 Babel 用我們剛剛安裝的兩個 presets

接下來，更新 webpack 配置文件

config.module = {n rules: [n {n test: /.(js|jsx)$/,n exclude: /node_modules/,n use: [babel-loader],n },n ],n}n

更新以後，雖然看不到什麼變化，但事實上我們可以使用 ES6 了

React

最後，我們來添加 React，這也可能是你閱讀這篇文章的原因

首先，我們還是先安裝它

yarn add react react-domn

用下面代碼替換 console.log

import React, { Component } from react;nimport { render } from react-dom;nnexport default class Hello extends Component {n render() {n return <h1>Hello from 楓上霧棋!</h1>;n }n}nnrender(<Hello />, document.getElementById(app));n

因為要添加 <div id="app"></div>，所以我們要修改一下 html-webpack-plugin 的配置

new HtmlWebpackPlugin({n template: path.join(paths.appSrc, index.html),n}),n

參考 template 如下

<!DOCTYPE html>n<html>n <head>n <meta charset="UTF-8">n <meta name="viewport" content="width_=device-width, initial-scale=1, shrink-to-fit=no">n <title>webpack babel react revisited</title>n </head>n <body>n <noscript>n You need to enable JavaScript to run this app.n </noscript>n <div id="app"></div>n </body>n</html>n

接下來，就是見證奇蹟的時刻

重新啟動服務，你有沒有發現搭建一個 React 應用程序就這麼簡單

接下里，大家就可以自行探索，添加更多的東西來適應自身應用程序的需要

下面再補充一下如何添加 CSS 和圖片

CSS

每個 web 應用程序都離不開 CSS，我們在 src 目錄中創建 style.css

body,nhtml,n#app {n margin: 0;n width: 100%;n height: 100%;n}nn#app {n padding: 30px;n font-family: 微軟雅黑;n}n

將其添加到應用程序中我們需要使用 css-loader

如果想將 css 注入 style 標籤中，我們還需要 style-loader，通常，是將這兩個結合使用

我們使用 extract-text-webpack-plugin 將其解壓到外部

為此，我們首先安裝

yarn add --dev css-loader style-loader extract-text-webpack-pluginn

然後在 app.js 中導入 style.css

import ./style.css;n

最後更新 webpack 配置文件

config.module = {n rules: [n {n test: /.css$/,n use: ExtractTextPlugin.extract({n fallback: style-loader,n use: css-loader,n }),n },n ],n}nnconfig.plugins.push([n new ExtractTextPlugin("styles.css"),n])n

看起來稍顯複雜，但是大功告成，為了更好地使用它，我們都得經歷這個過程

重新啟動服務，你會發現你的 dist 目錄中多了一個 styles.css

圖片

最後我們增加 file-loader 來處理我們引入的圖片等文件

首先，安裝 file-loader

yarn add --dev file-loadern

我們在 src/images 中放入一張圖片，在 app.js 中導入

import avatar from ./images/avatar.jpg;nnexport default class Hello extends Component {n render() {n return (n <div>n <img src={avatar} alt="avatar" stylex={{ width: 400, height: 250 }} />n </div>n );n }n}n

更新 webpack 配置文件

config.module = {n rules: [n {n test: /.(png|jpg|gif)$/,n use: [n {n loader: file-loader,n options: {n name: [name].[ext],n outputPath: assets/images/,n },n },n ],n },n ],n}n

重啟服務，哈哈

總結

如果有什麼問題，可以查看 webpack-babel-react-revisited 倉庫

現在，大家對搭建 React 應用程序是不是感覺輕鬆了很多，但 React 整個技術棧並不止包括這些，還有 Redux，React Router，單元測試，代碼校驗等內容，關於 React 其他內容，歡迎查看日誌其他文章

原文鏈接：Setting up Webpack, Babel and React from scratch, revisited