亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

React16.8更改Webpack支持Less文件

z2xy / 744人閱讀

摘要：創(chuàng)建項(xiàng)目當(dāng)前最新版本是使用腳手架工具創(chuàng)建一個(gè)項(xiàng)目由于要在項(xiàng)目中使用暴露配置文件配置需要暴露配置文件，這就要使用腳手架工具提供的命令，運(yùn)行命令前需要將項(xiàng)目一下，否則項(xiàng)目無(wú)法成功，打開(kāi)終端運(yùn)行命令或者，命令是一次性命令，運(yùn)行后無(wú)法恢復(fù)

創(chuàng)建項(xiàng)目 
當(dāng)前最新React版本是16.8.6
使用create-react-app腳手架工具創(chuàng)建一個(gè)項(xiàng)目
由于要在項(xiàng)目中使用AntD
暴露配置文件

配置less-loader需要暴露webpack配置文件，這就要使用create-react-app腳手架工具提供的 eject 命令，運(yùn)行命令前需要將項(xiàng)目commit一下，否則項(xiàng)目無(wú)法eject成功，打開(kāi)終端運(yùn)行 yarn eject命令（或者npm run eject），eject命令是一次性命令，運(yùn)行后無(wú)法恢復(fù)，

yarn eject

能看到文件中多出了config文件夾

配置less

接下來(lái)安裝less和less-loader插件包，打開(kāi)終端輸入：

cd your-project
yarn add less less-loader

打開(kāi)config文件夾，找到webpack.config.js文件打開(kāi)，主要修改里面的三處地方：

1.修改style files regexes（樣式文件正則），找到 注釋style files regexes，在這部分最后添加如下兩行代碼：

const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;

2.修改 getStyleLoaders 函數(shù)，添加代碼

{
  loader: require.resolve("less-loader"),
  options: lessOptions,
},

3.添加如下代碼，如下圖

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                "less-loader"
              ),
              // Don"t consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using less
            // using the extension .module.scss or .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

至此修改完成，重新打包

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

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

相關(guān)文章

  • React16.8更改Webpack支持Less文件

    摘要：創(chuàng)建項(xiàng)目當(dāng)前最新版本是使用腳手架工具創(chuàng)建一個(gè)項(xiàng)目由于要在項(xiàng)目中使用暴露配置文件配置需要暴露配置文件，這就要使用腳手架工具提供的命令，運(yùn)行命令前需要將項(xiàng)目一下，否則項(xiàng)目無(wú)法成功，打開(kāi)終端運(yùn)行命令或者，命令是一次性命令，運(yùn)行后無(wú)法恢復(fù) 創(chuàng)建項(xiàng)目 當(dāng)前最新React版本是16.8.6使用create-react-app腳手架工具創(chuàng)建一個(gè)項(xiàng)目由于要在項(xiàng)目中使用AntD 暴露配置文件 配置les...

    curlyCheng 評(píng)論0 收藏0

  • 【單頁(yè)面博客從前端到后端】環(huán)境搭建

    摘要：的配置其中就不多說(shuō)會(huì)解決更改組件的時(shí)熱更新直接刷新頁(yè)面的問(wèn)題。 工欲善其事，必先利其器。單頁(yè)面應(yīng)用的開(kāi)發(fā)和生產(chǎn)環(huán)境涉及文件的編譯、壓縮、打包、合并等，目前前端最流行的莫過(guò)于 webpack 。為了深入了解 webpack 以及其相關(guān)插件，我們決定不采用腳手架，自己來(lái)搭建基于 webpack 的開(kāi)發(fā)和生產(chǎn)環(huán)境。 基礎(chǔ)環(huán)境 nodejs的安裝： 移步官網(wǎng) 建議使用nvm來(lái)管理nodejs...

    wizChen 評(píng)論0 收藏0

  • 使用prince-cli，輕松構(gòu)建高性能React SPA項(xiàng)目~

    摘要：對(duì)模塊進(jìn)行了打包，監(jiān)聽(tīng)文件更改刷新等功能，創(chuàng)建了個(gè)服務(wù)，分別為靜態(tài)資源服務(wù)用于代理本地資源，與自刷新瀏覽器請(qǐng)求服務(wù)用于接受，請(qǐng)求，返回?cái)?shù)據(jù)服務(wù)用于收發(fā)消息。除了項(xiàng)目，還可以換成項(xiàng)目。項(xiàng)目地址如果覺(jué)得對(duì)你有所幫助，多謝支持 prince-cli 快速指南 這是一個(gè)為快速創(chuàng)建SPA所設(shè)計(jì)的腳手架，旨在為開(kāi)發(fā)人員提供簡(jiǎn)單規(guī)范的開(kāi)發(fā)方式、服務(wù)端環(huán)境、與接近native應(yīng)用的體驗(yàn)。使用它你能夠獲...

    roundstones 評(píng)論0 收藏0

  • 使用less-loader與antd按需加載(babel-plugin-import)的坑

    摘要：的按需加載設(shè)置安裝插件修改或新建文件進(jìn)行編輯，但兩者只能存一種根據(jù)配置更改主題顏色在中找到原配置注釋后更改為定義全局樣式配置自定義主題只需修改的顏色，再重啟項(xiàng)目即可更改主題顏色 為了在react中使用antd以及它的主題更改，需要在項(xiàng)目中 yarn eject 暴露出webpack文件進(jìn)行改造本答案是在日期當(dāng)時(shí)最新的create-react-app上的webpack版本 less-l...

    Eminjannn 評(píng)論0 收藏0

  • react+webpack項(xiàng)目常用的插件(plugins)

    一、HtmlWebpackPlugin使用： npm install html-webpack-plugin --save-dev 解釋?zhuān)哼@個(gè)插件是簡(jiǎn)化創(chuàng)建生成html（h5）文件用的，如果你引入的文件帶有hash值的話，這個(gè)尤為的有用，不需要手動(dòng)去更改引入的文件名！ 默認(rèn)生成的是index.html,基本用法為： var HtmlWebpackPlugin = require(html-webp...

    cyixlq 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<