webpack4詳細教程，從無到有搭建react腳手架（四）

chnmagnus 發布于2019-08-23 18:35 / 600人閱讀

摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二詳細教程，從無到有搭建腳手架三管理打包后目錄結構打包結構如下修改配置通過相對目錄對資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個大型的包，以為例安裝為第三

相關鏈接

webpack4詳細教程，從無到有搭建react腳手架（一）

webpack4詳細教程，從無到有搭建react腳手架（二）

webpack4詳細教程，從無到有搭建react腳手架（三）

管理打包后目錄結構 打包結構如下

        build/
            js/
                xxx.js
            css/
                xxx.css
            images/
                xxx.jpg
            index.html

修改配置

config/webpack.common.js

        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                output: {
                    - filename: "bundle.js",
                    + filename: "js/bundle.js",
                    path: path.resolve(__dirname, "../build"),
                },
                module: {
                    rules: [
                        ...
                        {
                            test: /.(jpg|png|svg|gif)$/,
                            use: [
                                {
                                    loader: "url-loader",
                                    options: {
                                        limit: 10240,
                                        - name: "[hash].[ext]",
                                        + name: "images/[hash].[ext]",
                                    }
                                },
                            ]
                        },
                    ]
                },
                plugins: [
                    ...
                    new ExtractTextPlugin({
                        - filename: "[name][hash].css"
                        + filename: "css/[name][hash].css"
                    }),
                ]
            }
        }

通過相對output目錄對資源命名前加上目錄名

yarn build，效果：

后面的步驟在這里需要安裝一個大型的包，以Ant-design為例 安裝

 yarn add antd

為第三方包配置css解析，將樣式表直接導出

config/webpack.common.js

        ...
        modules: {
            rules: [
                {
                    test: /.(css|scss)$/,
                    include: path.resolve(__dirname, "../src"),
                    use: ExtractTextPlugin.extract({
                        ...
                    })
                },
                + {
                +     test: /.(css|scss)$/,
                +     exclude: path.resolve(__dirname, "../src"),
                +     use: [
                +        "style-loader/url",
                +        {
                +            loader: "file-loader",
                +            options: {
                +                name: "css/[name].css"
                +            }
                +        }
                +    ]
                + },
            ]
        }
        ...

使用antd組件

引入antd樣式表

src/index.js

            import React from "react";
            import ReactDom from "react-dom";
            import App from "./App.js";
            + import "antd/dist/antd.css";


            ReactDom.render(, document.getElementById("root"));

創建目錄 src/component

src/component/Btn.js

            import React from "react";
            import {Button} from "antd";

            export default function Btn(){
                return (
                    
                        
                    
                )
            }

引入組件

src/App.js

            + import Btn from "./components/Btn";

            function App(){
                return (
                    
                        ...
                        + 
                    
                )
            }
            ...

yarn start，成功, 但是bundle.js體積非常的大，需要優化

分割bundle 配置

對chunks屬性我在一個思否回答中答了答案，鏈接： https://segmentfault.com/q/10...

config/webpack.common.js

        function webpackCommonConfigCreator(options){
            return {
                ...
                output: {
                    - filename: "js/bundle.js",
                    + filename: "js/[name].js",
                    path: path.resolve(__dirname, "../build"),
                },
                ...
                + optimization: {
                +     splitChunks: {
                +         chunks: "all",
                +         minSize: 50000,
                +         minChunks: 1,
                +     }
                + }
            }
        }

yarn build，打包如下

緩存 為了在每次修改代碼后，瀏覽器都能獲取到最新的js，通常會對output的名添加hash值

config/webpack.common.js

        output: {
            - filename: "js/[name].js",
            + filename: "js/[name][hash].js",
            path: path.resolve(__dirname, "../build"),
        },

效果

yarn build

修改開發代碼后再次打包

可以看到修改代碼后，打包的js文件名hash值變了，瀏覽器請求總能夠獲取到最新的代碼

但是分割出來的antd和react的代碼沒有變化，名字也變了，則瀏覽器也會再次請求這個模塊，應該沒有發生改變的模塊保持名稱以使瀏覽器從緩存中獲取，在生產模式下使用[chunkhash]替代[hash]

config/webpack.common.js

        output: {
            - filename: "js/[name][hash].js",
            path: path.resolve(__dirname, "../build"),
        },

config/webpack.prod.js

        + output: {
        +    filename: "js/[name][chunkhash].js",
        + },

config/webpack.dev.js

        + output: {
        +    filename: "js/[name][hash].js",
        + },

效果

yarn build

修改開發代碼后再次打包

配置source-map和manifest.json 在打包后的文件中，如果出現異常，堆棧追蹤異常不能定位到打包前的單個文件，所以使用source-map。官方推薦開發模式下使用inline-source-map, 生產模式使用source-map

config/webpack.dev.js

        const config = {
            ...
            + devtool: "inline-source-map",
            ...
        }

config/webpack.prod.js

        const config = {
            ...
            + devtool: "source-map",
            ...
        }

manifest

安裝

yarn add webpack-manifest-plugin -D

配置

config/webpack.prod.js

            ...
            const ManifestPlugin = require("webpack-manifest-plugin");

            const config = {
                ...
                plugins: [
                    ...
                    new ManifestPlugin(),
                ]
            }

配置公共路徑

當我們使用vue-cli或者create-react-app腳手架打包項目后，未修改publicPath的情況下直接打開index.html會報錯無法找到js、css靜態資源

因為腳手架默認的publicPath設置為 /，則對應的資源外鏈都是從服務器路徑/開始尋找資源

配置

config/webpack.common.js

        function webpackCommonConfigCreator(options){
            return {
                ...
                output: {
                    ...
                    + publicPath: "/"
                },
                ...
                module: {
                    rules: [
                        ...
                        {
                            test: /.(jpg|png|svg|gif)$/,
                            use: [
                                {
                                    loader: "url-loader",
                                    options: {
                                        limit: 10240,
                                        name: "images/[hash].[ext]",
                                        + publicPath: "/"
                                    }
                                },
                            ]
                        },
                    ]
                }
            }
        }

yarn build, 打包完成后推薦使用http-server

        yarn global add http-server
        npm install http-server -g

http-server build

源碼github倉庫： https://github.com/tanf1995/W...

GPU云服務器云服務器家用云服務器搭建詳細教程阿里云服務器搭建終端詳細教程阿里云服務器搭建app詳細教程 webpack4教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105476.html

webpack4詳細教程，從無到有搭建react腳手架（二）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一配置插件，這兩個插件基本上是必配的了介紹每次打包時清理上次打包生成的目錄官網指南關于這個插件部分內容已經過時沒有更新，按照官網配置會出錯，所以參考上這個插件文檔來配置，文檔地址生成打相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一）配置插件 clean-webpack-plugin、 html-webpack-plugin...

cuieney 2019-08-23 18:35 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（一）

摘要：是一個現代應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師切圖仔，非常有必要學習。官網的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師（切圖仔），非常有必要學習。 showImg(https://segment...

zhkai 2019-08-23 18:35 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（三）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二安裝配置創建，效果安裝配置創建效果配置模式修改配置現在編譯后的由動態內聯在中，需要分離到單獨的文件安裝插相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） Css 安裝loader yarn add style-loader css...

Sunxb 2019-08-23 18:35 評論0 收藏0
學習從零開始搭建React腳手架

摘要：寫在前面準備學習一下和相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現在半成品的過程中，目前完成開發模式的相關操作，添加了按需加載的地步。寫在前面準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 評論0 收藏0
如何搭建一個基于react、webpack4、babel7的項目（一）

摘要：對的工作流程有點模糊，以及據官方文檔稱的升級，性能得到了極大的提升，而還是用的，于是決定從頭開始搭建一個適合團隊的腳手架。保證各文件獲得一致的文件編碼和縮進效果。這些在后面文章中，都會一個個涉及到，此處不做詳細展開。前言寫前端項目這么久了，以前用的 dva 框架，后來用過 create-react-app 框架，都需要針對團隊做一些定制化的修改。對 webpack 的工作流程有點模...

IamDLY 2019-08-23 12:30 評論0 收藏0