国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Sunxb / 3597人閱讀

摘要：相關(guān)鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二安裝配置創(chuàng)建，效果安裝配置創(chuàng)建效果配置模式修改配置現(xiàn)在編譯后的由動態(tài)內(nèi)聯(lián)在中，需要分離到多帶帶的文件安裝插

相關(guān)鏈接

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

創(chuàng)建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"]
                        }
                    ]
                },
                ...
            }
        }

創(chuàng)建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

現(xiàn)在編譯后的css由js動態(tài)內(nèi)聯(lián)在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")()
                            +         ]
                            +     }
                            + }
                        ]
                    })
                },
                ...
            ]
        }
對生產(chǎn)模式下的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相關(guān)配置完了，當然還有一些靜態(tài)資源的配置

字體 安裝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選項決定界限

相關(guān)鏈接

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105477.html

相關(guān)文章

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

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

    cuieney 評論0 收藏0

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

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

    zhkai 評論0 收藏0

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

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

    chnmagnus 評論0 收藏0

  • 學習從零開始搭建React腳手架

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

    cod7ce 評論0 收藏0

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

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

    IamDLY 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<