搭建 webpack、react 開發環境（一）

時間 2019-11-07

原文原文鏈接

基本介紹

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源，它能夠將多種靜態資源 JavaScript、css、less 等轉換成一個靜態文件，減小了頁面的請求。css

React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，它是一個用於構建用戶界面的 JAVASCRIPT 庫，主要用於構建UI，不少人認爲 React 是 MVC 中的 V（視圖）。因爲擁有較高的性能，代碼邏輯很是簡單，因此在全球範圍內的使用率都比較高。html

這一次爲了更好的學習 webpack 環境的構建和開始 React 的開發，工程搭建將會以實現一個 todolist 爲目標，將每個節點做爲一個 commit，以便更直觀的查看實現一個功能點所須要作的事情，同時也使得選擇所需的依賴變得更簡單可行。前端

你能夠點擊 show me the code 來查看和 Fork 此項目，若是你須要查看更多關於 Angular或Vue 開發環境的搭建能夠點擊查看更多來進行查看，歡迎你們一塊兒學習和交流。node

安裝配置 webpack 基礎

首先新建工程目錄，這裏咱們給項目名稱取名爲 webpack-react，對其進行建立並進入該目錄：
```
$ mkdir webpack-react && cd webpack-react
```
而後進行初始化生成 package.json 文件(其中記錄定義了這個項目所須要的各類模塊,以及項目的配置信息，好比好比名稱、版本、許可證等元數據)：
```
$ yarn init
```
根據提示咱們能夠設置相關信息，或者一路默認(回車)便可，固然若是你只要生成默認的，咱們能夠在執行初始化時命令時加上一個參數：
```
$ yarn init -y
```
便可。
而後安裝 webpack，因爲咱們使用的是 webpack4+ 的版本，因此咱們還須要安裝 CLI：
```
$ yarn add webpack webpack-cli --dev
```
當咱們使用 yarn add 時，不只會安裝對應的包，並會將包的信息寫進 yarn.lock 文件，從事該項目的其餘開發人員在運行 yarn或yarn install 時將得到與您相同的依賴項。
在 webpack 4 不是必需要有配置文件的，因此此時若是咱們在 index.js 中添加內容直接執行 webpack 就能夠進行打包，由於在 webpack 4 中默認入口文件爲 ./src/index.js，默認出口文件爲 ./dist/main.js。react

安裝完成以後咱們來對 webpack 進行簡單的配置，首先咱們在 package.json 同級目錄下建立 config 目錄用於放置部分配置文件，如今咱們在 config 目錄下新建 webpack.base.config.js 文件，用來存放開發模式和生產模式公共的配置文件，建立 webpack.dev.config.js 文件，用來存放開發模式下的配置文件，建立 webpack.build.config.js 文件，用來存放生產模式下的配置文件：webpack
```
$ mkdir config
$ cd config
$ touch webpack.base.config.js webpack.dev.config.js webpack.build.config.js
```
如今咱們先向共同的配置文件 webpack.base.config.js 中寫入如下內容：git
```
const path = require('path');
module.exports = {
    // 入口配置
    entry: {
        main: path.join(__dirname, '../src/index.js'),
    },
    // 輸出配置
    output: {
        filename: 'js/[name].js', // 輸出文件的文件名
        path: path.join(__dirname, '../dist'), // 輸出文件所在目錄
    }
};
```
如配置中所示，如今咱們去對應的目錄下建立對應的入口文件 index.js，並在其中輸出「Hello world」：github
```
// index.js
console.log('打包成功');
```

剛剛咱們創建三個配置文件，爲了將兩個模式下的配置文件與公共配置文件結合起來，咱們須要安裝和使用 webpack-merge 來進行合併：

$ yarn add webpack-merge --dev

這裏咱們先對開發模式下的配置文件進行配置：web

// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合併配置的插件
const webpackMerge = require('webpack-merge');

module.exports = webpackMerge(webpackBaseConfig, {
    // 指定模式
    mode: 'development',
    // devtool由 webpack 直接提供，將打包後的文件中的錯誤映射到最初對應的文件中，便於調試
    devtool: 'cheap-module-eval-source-map'
});

順便咱們也把生產模式下也簡單的配置一下，有時候咱們也能夠打包一下，查看打包後文件存放的名稱和路徑等，以檢測書寫錯誤致使一些錯誤，固然如今咱們只須要對其進行簡單的配置：npm

// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合併配置的插件
const webpackMerge = require('webpack-merge');

module.exports = webpackMerge(webpackBaseConfig, {
    // 指定模式
    mode: 'production'
});

使用 webpack-dev-server 構建本地服務器：webpack-dev-server 提供了一個簡單的 web 服務器，而且可以實時從新加載。它的使用也比較簡單，首先咱們對其進行安裝：

$ yarn add webpack-dev-server --dev

因爲它直接開發模式下會被用到，因此咱們直接去開發模式的配置文件(webpack.dev.config.js)下進行配置：

const path = require('path');
// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合併配置的插件
const webpackMerge = require('webpack-merge');

module.exports = webpackMerge(webpackBaseConfig, {
    // 指定模式
    mode: 'development',
    // devtool由 webpack 直接提供，將打包後的文件中的錯誤映射到最初對應的文件中，便於調試
    devtool: 'cheap-module-eval-source-map',
    // 對 webpack-dev-server 進行配置
    devServer: {
        //本地服務器所加載的頁面所在的目錄
        contentBase: path.join(__dirname, "../dist"),
        /* 服務器的主機號，默認是 localhost
        * 將該地址設爲電腦的 ip 地址，局域網內的移動設備經過訪問該地址下的30端口便可訪問 web 應用
        */
        host: 'localhost',
        // 端口
        port: 3000,
        /* 設置編譯後文件的路徑，致使最後的文件文件地址爲：http://localhost:3000/dist/index.js
        *
        * publicPath: 'http://localhost:3000/',
        */
        /* 應對返回404頁面時定向到特定頁面
        *
        * historyApiFallback: {
        *   rewrites: [{
        *     from: /./,
        *     to: '/404.html'
        *   }]
        * },
        */
        // 熱模塊替換機制
        //- hot: true,
        /* 默認爲 true, 意思是，在打包時會注入一段代碼到最後的 js 文件中，用來監視頁面的改動而自動刷新頁面
        * 當爲 false 時，網頁自動刷新的模式是 iframe，也就是將模板頁放在一個 frame中
        *
        * inline: true,
        */
        // 爲 true 時，dev server 第一次會自動打開瀏覽器
        open: true,
        /* 對全部的服務器資源採用 gzip 壓縮 
        * 對 JS，CSS 資源的壓縮率很高，能夠極大得提升文件傳輸的速率
        * 可是須要服務端要對文件進行壓縮，客戶端進行解壓，增長了兩邊的負載
        * 
        * compress: true
        */
        disableHostCheck: true
    }
});

由於咱們構建的是一個 web 應用，因此咱們還須要對 .html 文件編譯的支持，這樣也能夠更直觀的看清咱們 webpack 工做的狀況，爲此咱們須要安裝 html-webpack-plugin 以及 html-loader 加載器：

$ yarn add html-webpack-plugin html-loader --dev

由於該配置在兩種模式下都須要使用，因此咱們在公共配置文件中進行配置：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 入口配置
    entry: {
        main: path.join(__dirname, '../src/index.js'),
    },
    // 輸出配置
    output: {
        filename: 'js/[name].js', // 輸出文件的文件名
        path: path.join(__dirname, '../dist'), // 輸出文件所在目錄
    },
    // 加載器
    module: {
        rules: [{
        test: /\.html$/,
        use: [{
                loader: "html-loader",
                options: {
                    minimize: true
                }
            }]
        }]
    },
    // 插件管理
    plugins: [
        //建立 .html 並自動引入打包後的文件
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            // 參照最初建立的 .html 來生成 .html
            inject: true,
            // 引入根路徑下的 favicon.ico
            favicon: path.resolve('favicon.ico')
        })
    ]
};

固然咱們在這裏還須要在對應的目錄下建立 index.html，也就是在根目錄下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>webpack-react</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>

    <div id="root">Hello world</div>
</body>

</html>

在安裝和配置完上面的基本信息以後，最後咱們須要來使用上面作的一切準備，首先咱們須要設置 NPM 腳本(NPM Scripts)。打開咱們最初初始化項目時生成的 package.json 文件，在對應的 script 字段下進行配置：
```
"scripts": {
    "dev": "webpack-dev-server --config config/webpack.dev.config.js",
    "build": "webpack --config config/webpack.prod.config.js"
}
```
Npm 中容許在 package.json 文件裏面，使用 scripts 字段定義腳本命令。它是一個對象，它的每個屬性，都對應一段腳本。

每當執行 npm run，就會自動新建一個 Shell，在這個 Shell 裏面執行指定的腳本命令，新建的這個 Shell，會將當前目錄的 node_modules/.bin 子目錄加入 PATH 變量，執行結束後，再將 PATH變量恢復原樣，因此當前目錄的 node_modules/.bin 子目錄裏面的全部腳本，均可以直接用腳本名調用，而沒必要加上路徑。

由於咱們的配置文件不在根目錄下，在這裏咱們經過 --config 來指定執行腳本路徑，如今咱們就可使用 npm run dev 開啓 web 應用，若是前面的操做正確的化你將看到頁面上顯示「Hello world」的字樣，而且控制檯中輸入「編譯成功」的字樣。

配置支持 ES六、JSX

現在在前端開發中 Javascript 主要是用 ES6 編寫的，但並非全部的瀏覽器都知道如何處理 ES6，所以咱們需對 ES6 進行轉換。

在 webpack 的 loader(加載器)中，babel-loader 正是這樣一個用於將 ES6 及以上版本轉譯至 ES5 的神器，要使用它咱們還須要安裝一些依賴：

$ yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev

而後須要在公共配置文件中 rules 屬性配置 babel-loader 的相關信息：

{
    test: /\.m?js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader'
    }
}

最後咱們須要在根目錄下建立 .babelrc 文件寫入如下內容：

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

如今咱們就能夠在項目中使用 ES6或着是JSX 語法啦。

配置支持 React、React-dom

首先咱們將根目錄下 index.html 文件中的 "Hello world"文本刪掉，而後在 ./src/index.js 文件中寫入下面的內容：

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
        <div>
            <p>Hello world</p>
        </div>
    );
};
ReactDOM.render(<App />, document.getElementById("root"));

顯然保存後運行服務會報錯，由於到目前位置咱們的項目還不支持 React、React-dom，爲了進行 React 開發，首先咱們要安裝以下依賴：

$ yarn add react react-dom

安裝完成以後，再啓動項目，會發現剛剛刪除的 "Hello world"文本再次出現了，並且是經過 React 來實現的，到此 webpack-react 最基礎的開發環境就搭建好了，可是 webpack 方面還有許多配置和一些須要優化的地方，因此咱們將在下篇文章裏繼續記錄開發環境的搭建過程，你能夠點擊搭建 webpack、react 開發環境（二）來繼續查看。

相關標籤/搜索

每日一句

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