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

chnmagnus 發(fā)布于2019-08-23 18:35 / 607人閱讀

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

相關(guān)鏈接

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

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

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

管理打包后目錄結(jié)構(gòu) 打包結(jié)構(gòu)如下

        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"
                    }),
                ]
            }
        }

通過相對(duì)output目錄對(duì)資源命名前加上目錄名

yarn build，效果：

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

 yarn add antd

為第三方包配置css解析，將樣式表直接導(dǎo)出

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"));

創(chuàng)建目錄 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體積非常的大，需要優(yōu)化

分割bundle 配置

對(duì)chunks屬性我在一個(gè)思否回答中答了答案，鏈接： 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，通常會(huì)對(duì)output的名添加hash值

config/webpack.common.js

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

效果

yarn build

修改開發(fā)代碼后再次打包

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

但是分割出來的antd和react的代碼沒有變化，名字也變了，則瀏覽器也會(huì)再次請(qǐng)求這個(gè)模塊，應(yīng)該沒有發(fā)生改變的模塊保持名稱以使瀏覽器從緩存中獲取，在生產(chǎn)模式下使用[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

修改開發(fā)代碼后再次打包

配置source-map和manifest.json 在打包后的文件中，如果出現(xiàn)異常，堆棧追蹤異常不能定位到打包前的單個(gè)文件，所以使用source-map。官方推薦開發(fā)模式下使用inline-source-map, 生產(chǎn)模式使用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(),
                ]
            }

配置公共路徑

當(dāng)我們使用vue-cli或者create-react-app腳手架打包項(xiàng)目后，未修改publicPath的情況下直接打開index.html會(huì)報(bào)錯(cuò)無法找到j(luò)s、css靜態(tài)資源

因?yàn)槟_手架默認(rèn)的publicPath設(shè)置為 /，則對(duì)應(yīng)的資源外鏈都是從服務(wù)器路徑/開始尋找資源

配置

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倉(cāng)庫： https://github.com/tanf1995/W...

GPU云服務(wù)器云服務(wù)器家用云服務(wù)器搭建詳細(xì)教程阿里云服務(wù)器搭建終端詳細(xì)教程阿里云服務(wù)器搭建app詳細(xì)教程 webpack4教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105476.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

chnmagnus

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

把 RNN 循環(huán)神經(jīng)網(wǎng)絡(luò)植入體內(nèi)，僅憑一張“薄片”，就能直接檢測(cè)你有無心律異常

閱讀 3599·2021-09-13 10:28
SecureIDC：$19/月/1GB內(nèi)存/100GB SSD空間/500GB流量/1Gbps端口/

閱讀 1948·2021-08-10 09:43
第三集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(button組件其一)

閱讀 1022·2019-08-30 15:44
Bootstrap 柵格布局

閱讀 3193·2019-08-30 13:14
解決input 中placeholder的那些神坑

閱讀 1850·2019-08-29 16:56
一個(gè)常年更新的CSS采坑合集

閱讀 2947·2019-08-29 16:35
HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片拉近效果

閱讀 2854·2019-08-29 12:58
canvas-塔防游戲

閱讀 872·2019-08-26 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章

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

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

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

學(xué)習(xí)從零開始搭建React腳手架

**如何搭建一個(gè)基于react、webpack4、babel7的項(xiàng)目（一）**

發(fā)表評(píng)論

0條評(píng)論

chnmagnus

男|高級(jí)講師

TA的文章

把 RNN 循環(huán)神經(jīng)網(wǎng)絡(luò)植入體內(nèi)，僅憑一張“薄片”，就能直接檢測(cè)你有無心律異常

SecureIDC：$19/月/1GB內(nèi)存/100GB SSD空間/500GB流量/1Gbps端口/

第三集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(button組件其一)

Bootstrap 柵格布局

解決input 中placeholder的那些神坑

一個(gè)常年更新的CSS采坑合集

HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片拉近效果

canvas-塔防游戲

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

webpack4詳細(xì)教程，從無到有搭建react腳手架（四）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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