资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack4详细教程，从无到有搭建react脚手架（四）

webpack4详细教程，从无到有搭建react脚手架（四）

chnmagnus / 574人阅读

摘要：相关链接详细教程，从无到有搭建脚手架一详细教程，从无到有搭建脚手架二详细教程，从无到有搭建脚手架三管理打包后目录结构打包结构如下修改配置通过相对目录对资源命名前加上目录名，效果后面的步骤在这里需要安装一个大型的包，以为例安装为第三

相关链接

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教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105476.html

相关文章

  • webpack4详细教程，从无到有搭建react脚手架（二）

    摘要：相关链接详细教程，从无到有搭建脚手架一配置插件，这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考上这个插件文档来配置，文档地址生成打 相关链接 webpack4详细教程，从无到有搭建react脚手架（一） 配置插件 clean-webpack-plugin、 html-webpack-plugin...

    cuieney 评论0 收藏0

  • webpack4详细教程，从无到有搭建react脚手架（一）

    摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。 showImg(https://segment...

    zhkai 评论0 收藏0

  • webpack4详细教程，从无到有搭建react脚手架（三）

    摘要：相关链接详细教程，从无到有搭建脚手架一详细教程，从无到有搭建脚手架二安装配置创建，效果安装配置创建效果配置模式修改配置现在编译后的由动态内联在中，需要分离到单独的文件安装插 相关链接 webpack4详细教程，从无到有搭建react脚手架（一） webpack4详细教程，从无到有搭建react脚手架（二） Css 安装loader yarn add style-loader css...

    Sunxb 评论0 收藏0

  • 学习从零开始搭建React脚手架

    摘要：写在前面准备学习一下和相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步，依赖总览完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了按需加载的地步。 写在前面 准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;...

    cod7ce 评论0 收藏0

  • 如何搭建一个基于react、webpack4、babel7的项目（一）

    摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。 前言 写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

    IamDLY 评论0 收藏0

发表评论

登陆后可评论

0条评论

chnmagnus

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<