使用 webpack4 從0開始搭建 react 項目

前言

最近在學習 webpack 基礎使用，項目優化等問題。總感受要寫點東西記錄一下。若是你對webpack感興趣的話，能夠跟着這篇文章來嘗試搭建（大神自行略過），好了廢話很少說直接進入正文。

1、項目搭建

初始化項目

mkdir react-webpack-demo
cd react-webpack-demo
npm init -y
複製代碼

安裝 webpack，webpack4 將 webpack-cli 從 webpack 中分離了出來，因此這裏要同時安裝 webpack webpack-cli

npm i webpack webpack-cli -D
複製代碼

webpack 建議在局部安裝，若是安裝到全局，會鎖定webpack版本，多項目使用 webpack 會由於版本問題致使項目構建失敗

在 package.json 中增長運行命令

"scripts": {
    "dev": "webpack"
}
複製代碼

接下來在項目下建立 src 文件和 src/index.js 做爲入口文件（webpack 默認配置中 entry 入口是 src/index.js）

執行 npm run dev 會看到在項目下會生成一個 dist 目錄（打包成功）

到目前爲止一個 webpack 項目已經搭建完成，下面將開始 webpack 配置以及搭建一個 react 項目

2、loader

首先在項目下建立 webpack.config.js，下文中會直接使用默認配置中的屬性將再也不所有展現。請讀者自行根據屬性進行辨別。

/**** webpack.config.js ***/

// webpack 默認配置
const path = require('path');

module.exports = {
    // 項目入口文件 支持 str | [] | {}
    entry: path.resolve(__dirname, './src/index.js'),
    // 項目出口 
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'mian.js'
    },
    // 打包環境 默認是生產環境 production
    // 若是是開發環境 這裏須要換成 development
    // 接下來爲了觀察打包後的文件，使用 development
    mode: 'development',
    // 模塊 這些選項決定了如何處理項目中的不一樣類型的模塊。
    module: {},
    // 插件
    plugins: [],
    // 是否開啓 source-map
    devtool: 'cheap-module-eval-source-map'
}
複製代碼

webpack 默認只支持 js/json，能夠使用 loader 來預處理文件。這容許你打包除 JavaScript 以外的任何靜態資源。你能夠使用 Node.js 來很簡單地編寫本身的 loader。

安裝 css-loader/file-loader

npm i css-loader file-loader -D
複製代碼

// webpack.config.js 
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                },
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {},
                },
            ],
        }
    ]
},
複製代碼

ok 如今你能夠隨意打包css文件和圖片資源了。

目前爲止一切運行的都沒有問題，咱們嘗試着在入口文件中寫一些代碼

const arr = [new Promise(() => { }), new Promise(() => { })];
arr.map(item => {
    console.log(item);
})
複製代碼

打包後查看文件

咱們想要的效果是能夠轉換成 ES5 的代碼來作瀏覽器兼容，OK開整。

這裏使用babel來作代碼轉化

// 安裝
npm i babel-loader @babel/core @babel/preset-env -D

// 在webpack.config.js中使用
module: {
    rules: [
        {
            test: /\.js/,
            loader: 'babel-loader'
        }
    ]
},
複製代碼

根目錄下新建 .babelrc 文件來配 babel-loader 的配置項

// .babelrc
{
    "presets": ["@babel/preset-env"]
}
複製代碼

運行打包 npm run dev

到目前爲止任務完成一半，Promise 等最新的特性尚未轉換成功。

繼續安裝 @babel/polyfill 並在入口文件中引入

// 安裝
npm i @babel/polyfill -D

// index.js
import '@babel/polyfill';
複製代碼

OK 如今編譯成功了，生成的代碼已經所有成功轉成ES5的代碼，可是

明明剛纔才 幾k 的代碼，如今直接 400多k。緣由是由於 webpack 會直接將 polyfill 中的方法所有打包到dist中去，但是明明我只使用了 Promise 這明顯不是我想要的結果。

這裏就須要配置 useBuiltIns 了

// 從新更改 .babelrc 文件
{
    "presets": [
        [
            "@babel/preset-env",
            {
                // 描述您爲項目支持/目標的環境
                "targets": {
                    "browsers": ["> 1%", "last 2 versions"]
                },
                "corejs": 2, //新版本須要指定核⼼庫版本
                // "usage"| "entry"| false，默認爲false
                "useBuiltIns": "usage" //按需注⼊
            }
        ]
    ]
}
複製代碼

到目前爲止webpack使用babel基礎功能基本結束，更多 loader 請參考官方 www.webpackjs.com/loaders/

3、plugins

先看一波官方描述

webpack 有着豐富的插件接口(rich plugin interface)。webpack 自身的多數功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活。
複製代碼

上一步只是實現了打包css/js/圖片資源打包的功能。下面咱們將藉助插件實現自動生成 html 文件。每次部署自動清空 dist 目錄等基本功能

首先老套路，安裝插件

npm i html-webpack-plugin clean-webpack-plugin -D
複製代碼

項目中使用，首先在項目下建立 index.html 模板

const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

plugins: [
    // 複製一個 html 並將最後打包好的資源在 html 中引入
    new htmlWebpackPlugin({
        // 頁面title 須要搭配 ejs 使用
        title: "京東商城",
        // html 模板路徑
        template: "./index.html",
        // 輸出文件名稱
        filename: "index.html",
        minify: {
            // 壓縮HTML⽂件
            removeComments: true, // 移除HTML中的註釋
            collapseWhitespace: true, // 刪除空⽩符與換⾏符
            minifyCSS: true // 壓縮內聯css
        }
    }),
    // 每次部署時清空 dist 目錄
    new CleanWebpackPlugin()
],
複製代碼

開始搭建 react 項目

首先安裝 react react-dom

npm i react react-dom -S
複製代碼

src 下從新建立 react.js 文件

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    
    render() {
        return <div> hello word`12 </div>
    }
}

// 須要在 index.html 中增長一個 div標籤 id 設置爲 'app'
ReactDom.render(<App />, document.getElementById('app')); 複製代碼

修改 webpack.config.js

entry: path.resolve(__dirname, './src/react.js'),
output: {
    path: path.resolve(__dirname, './dist'),
    // 模塊標識符(module identifier)的 hash 取前8位
    filename: 'main_[hash:8].js'
},
複製代碼

在執行打包，會有一個報錯，webpack 並不認識 react 的語法

安裝 @babel/preset-react

npm i @babel/preset-react -D
複製代碼

在 .babelrc 中配置一下 @babel/preset-react

{
    "presets": [
        [
            "@babel/preset-env",
            {
                // 描述您爲項目支持/目標的環境
                "targets": {
                  "browsers": ["> 1%", "last 2 versions"]
                },
                "corejs": 2, //新版本須要指定核⼼庫版本
                "useBuiltIns": "usage" //按需注⼊
            }
        ],
        "@babel/preset-react"
    ]
}
複製代碼

OK 如今 react 項目就能夠正常打包了。可是咱們平常開發中並不會每次打完包再來看效果，這裏的話就須要起一個服務而且配值熱更新了。

首先咱們須要安裝 webpack-dev-server

npm i webpack-dev-server -D
複製代碼

配置 webpack.config.js 文件

const webpack = require('webpack')
module.exports = {
    // devServer和entry是平級的
    devServer: {
        // 指向打包後的文件地址
        contentBase: './dist',
        // 是否自動打開一個新窗口
        open: true,
        // 端口號
        port: 8081,
        // 是否開啓熱更新
        hot: true,
        // 啓用熱模塊替換，而不會在構建失敗時將頁面刷新做爲後備。
        hotOnly: true
    },
    plugins: [
        // 啓用模塊熱替換(HMR - Hot Module Replacement)
        new webpack.HotModuleReplacementPlugin()
    ]
}
複製代碼

在package.json 中新增一條命令

"scripts": {
    "server": "webpack-dev-server"
}
複製代碼

到目前爲止一個基礎版的 react 就已經搭建完成了，下一篇分享將如何使用 webpack 優化項目。git 地址 github.com/shanyq1673/…