资讯专栏INFORMATION COLUMN

webpack4详细教程,从无到有搭建react脚手架(三)

Sunxb / 3530人阅读

摘要:相关链接详细教程,从无到有搭建脚手架一详细教程,从无到有搭建脚手架二安装配置创建,效果安装配置创建效果配置模式修改配置现在编译后的由动态内联在中,需要分离到多带带的文件安装插

相关链接

webpack4详细教程,从无到有搭建react脚手架(一)

webpack4详细教程,从无到有搭建react脚手架(二)

Css 安装loader
yarn add style-loader css-loader -D
配置
config/webpack.common.js
        ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                module: {
                    rules: [
                        ...
                        + {
                        +     test: /.css$/,
                        +     include: path.resolve(__dirname, "../src"),
                        +     use: ["style-loader", "css-loader"]
                        + }
                    ]
                },
                ...
            }
        }

创建src/app.css

src/app.css
        .text{
            font-size: 20px;
            color: brown;
        }
src/App.js
        + import "./app.css";

        function App(){
            return (
                - 
+
hello react
) } ...
yarn start, 效果:

Scss 安装loader
    yarn add sass-loader node-sass -D
配置loader
config/webpack.common.js
        ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                module: {
                    rules: [
                        ...
                        {
                        -    test: /.css/,
                        +    test: /.(css|scss)$/,
                            include: path.resolve(__dirname, "../src"),
                        -    use: ["style-loader", "css-loader"]
                        +    use: ["style-loader", "css-loader", "sass-loader"]
                        }
                    ]
                },
                ...
            }
        }

创建src/app.scss

src/app.scss
        .title{
            font-size: 18px;
            font-weight: 800;
            color: #333;
            text-decoration: underline;
        }
src/App.js
        - import "./app.css";
        + import "./app.scss";

        function App(){
            return (
                - 
+
hello react
) } ...
yarn start, 效果:

配置css-module模式 修改配置
config/webpack.common.js
        ...
        function webpackCommonConfigCreator(options){
            ...
            return {
                ...
                module: {
                    rules: [
                        ...
                        {
                            ...
                            - use: ["style-loader", "css-loader", "sass-loader"]
                            + use: [
                            +         "style-loader", 
                            +         {
                            +             loader: "css-loader",
                            +             options: {
                            +                 modules: {
                            +                     mode: "local",
                            +                     localIdentName: "[path][name]_[local]--[hash:base64:5]"
                            +                 },
                            +                 localsConvention: "camelCase"
                            +             }
                            +         }, 
                            +         "sass-loader"
                            + ]
                        }
                    ]
                },
                ...
            }
        }
src/App.js
        - import "./app.scss";
        + import styles from "./app.scss";

        function App(){
            return (
                - 
+
hello react
) } export default hot(App);
yarn start

现在编译后的css由js动态内联在html中,需要分离到多带带的文件 安装插件extract-text-webpack-plugin, 注意最新版才支持webpack4
yarn add extract-text-webpack-plugin@next -D
配置
config/webpack.common.js
        ...
        + const ExtractTextPlugin = require("extract-text-webpack-plugin");

        ...
        module: {
            rules: [
                ...
                {
                    test: /.(css|scss)$/,
                    include: path.resolve(__dirname, "../src"),
                    - use: [
                    -     "style-loader", 
                    -     {
                    -         loader: "css-loader",
                    -         options: {
                    -             modules: {
                    -                 mode: "local",
                    -                 localIdentName: "[path][name]_[local]--[hash:base64:5]"
                    -             },
                    -             localsConvention: "camelCase"
                    -         }
                    -     }, 
                    -     "sass-loader"
                    - ]
                    + use: ExtractTextPlugin.extract({
                    +     fallback: "style-loader",
                    +     use: [
                    +         {
                    +             loader: "css-loader",
                    +             options: {
                    +                 modules: {
                    +                     mode: "local",
                    +                     localIdentName: "[path][name]_[local]--[hash:base64:5]"
                    +                 },
                    +                 localsConvention: "camelCase"
                    +             }
                    +         }, 
                    +         "sass-loader"
                    +     ]
                    + })
                },
                ...
            ]
        },
        plugins: [
            ...
            new ExtractTextPlugin({
                filename: "[name][hash].css"
            }),
        ]
yarn build, 效果:

使用postcss对css3属性添加前缀 安装
yarn add postcss-loader postcss-import autoprefixer -D
配置
config/webpack.common.js
        module: {
            rules: [
                ...
                {
                    test: /.(css|scss)/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [
                            ...
                            + {
                            +     loader: "postcss-loader",
                            +     options: {
                            +         ident: "postcss",
                            +         plugins: loader => [
                            +             require("postcss-import")({ root: loader.resourcePath }),
                            +             require("autoprefixer")()
                            +         ]
                            +     }
                            + }
                        ]
                    })
                },
                ...
            ]
        }
对生产模式下的css进行压缩 安装
yarn add optimize-css-assets-webpack-plugin -D
配置
config/webpack.prod.js
        + const optimizeCss = require("optimize-css-assets-webpack-plugin");

        const config = {
            + plugins: [
            +     new optimizeCss({
            +         cssProcessor: require("cssnano"),
            +         cssProcessorOptions: { discardComments: { removeAll: true } },
            +         canPrint: true
            +     }),
            + ],
        }
        ...
yarn build, 效果:

css相关配置完了,当然还有一些静态资源的配置

字体 安装loader
yarn add file-loader -D
配置
config/webpack.common.js
        module: {
            rules: [
                ...
                + {
                +     test: /.(woff|woff2|eot|ttf|otf)$/,
                +     use: ["file-loader"]
                + },
            ]
        },
图片 安装loader
yarn add url-loader -D
配置
config/webpack.common.js
        module: {
            rules: [
                ...
                + {
                +     test: /.(jpg|png|svg|gif)$/,
                +     use: [
                +         {
                +             loader: "url-loader",
                +             options: {
                +                 limit: 10240,
                +                 name: "[hash].[ext]",
                +             }
                +         },
                +     ]
                + },
            ]
        }
添加两张图片

src/assets/small.jpg -- 6kb

src/assets/bigger.jpg -- 20kb

引入图片
src/App.js
        + import small_pic from "./assets/small.jpg";
        + import bigger_pic from "./assets/bigger.jpg";

        function App(){
            return (
                
hello react + +
) } export default hot(App);
效果

可以看到,小于10k的图片编译成了base64格式,而大于10k的图片以链接形式赋值给src, 由url-loader的limit选项决定界限

相关链接

webpack4详细教程,从无到有搭建react脚手架(四)

源码github仓库: https://github.com/tanf1995/W...

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

转载请注明本文地址:https://www.ucloud.cn/yun/105477.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脚手架(二) webpack4详细...

    chnmagnus 评论0 收藏0
  • 学习从零开始搭建React手架

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

    cod7ce 评论0 收藏0
  • 如何搭建一个基于reactwebpack4、babel7的项目(一)

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

    IamDLY 评论0 收藏0

发表评论

0条评论

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