webpack配置教程(二)

            一 ： 樣式    

 在src下創(chuàng)建一個(gè)index.css的文件.

       寫(xiě)上如下代碼：

            body{

                background-color: red;

    }

在app.js中引入這個(gè)css文件

        import "./index.css";        

現(xiàn)在我們直接執(zhí)行npm run start .看看會(huì)發(fā)生什么.

果然出現(xiàn)了這個(gè)錯(cuò)誤。因?yàn)閣ebpack它本身是不認(rèn)識(shí)css代碼，所以需要我們?nèi)ヅ渲脕?lái)讓它識(shí)別css代碼

css-loader --->解析css

安裝: npm i -D css-loader

我們還需要在webpack配置文件配置。跟之前react類(lèi)似。

如下:

在執(zhí)行npm run start

可以順利打包，但是打開(kāi)打包后的html。發(fā)現(xiàn)樣式未生效，f12調(diào)試發(fā)現(xiàn), css樣式根本就沒(méi)有引入到html中.

所以這時(shí)候需要有一個(gè)插件幫我們引入

style-loader---->Adds CSS to the DOM by injecting a <style> tag

安裝 : npmi -D style-loader

引入-

在執(zhí)行npm run start，打包成功后，在瀏覽器打開(kāi)html頁(yè)面且f12打開(kāi)控制臺(tái)查看,

css代碼已經(jīng)被插入到當(dāng)前頁(yè)面，并且生效了。

sass

    在src下創(chuàng)建index.scss文件,并且添加如下代碼:

                body{

                background: pink;

                }

在app.js中引入,刪除引入的index.css

--import "./index.css";

++import "./index.scss";

這時(shí)候執(zhí)行npm run start,會(huì)發(fā)生什么，我想,經(jīng)歷過(guò)之前的，你必然已經(jīng)想到會(huì)報(bào)錯(cuò)并且知道是什么錯(cuò)誤了。

 提示我們用合適的loader來(lái)解析scss文件。

所以我們先安裝所需要的相關(guān)插件:

npm i -D sass-loader node-sass    

這一步安裝可能會(huì)有報(bào)錯(cuò)，具體錯(cuò)誤及解決辦法參考

https://blog.csdn.net/qq_35440678/article/details/51909327

https://github.com/nodejs/node-gyp/issues/307#issuecomment-240556824

安裝成功之后，引入.代碼如下-

執(zhí)行npm run start  ，打包成功，并且運(yùn)行沒(méi)問(wèn)題.

目前css代碼是嵌入在js中,css樣式代碼在js很奇怪,也不方便查看。我們需要讓css獨(dú)立出來(lái)。

所以有們又需要用到一個(gè)插件.

    https://www.webpackjs.com/plugins/extract-text-webpack-plugin/

    npm i -D extract-text-webpack-plugin

在webpack.config.js添加相關(guān)和修改配置.

        一:    對(duì)象引入

                    //提取分離成獨(dú)立的css文件

                    const ExtractTextPlugin = require("extract-text-webpack-plugin");

           二:  插件中引入.

         三 :配置

    最后運(yùn)行npm run start

                會(huì)發(fā)現(xiàn)報(bào)錯(cuò)了。

原因是:extract-text-webpack-plugin目前還沒(méi)有webpack4版本 .可以使用 npm i -D  extract-text-webpack-plugin@next解決

          詳細(xì):https://www.cnblogs.com/running-runtu/p/8769040.html

    安裝好后,在執(zhí)行 npm run start 時(shí)，打包成功且頁(yè)面沒(méi)問(wèn)題。

    打包后:

css模塊化:

        css-loader有一個(gè)屬性可以開(kāi)啟模塊化. 

修改配置. 如下:

  模塊化后，我們?cè)趈s中使用css的方式改變了。

修改index.scss

        .ot{

        font-size:50px;

        }

打開(kāi)app.js    模塊化后的css樣式是一個(gè)一個(gè)的模塊,所以我們需要具體引入

import style from "./index.scss";

class  App extends Component{

click = ()=>{

alert("ok");

}

render(){

return (

<div className = {style.ot}>

<span onClick = {this.click.bind(this)}>kkkkkk</span>

Hello React

</div>

)

}

}

打包后,打開(kāi)頁(yè)面打開(kāi)控制臺(tái)。發(fā)現(xiàn)類(lèi)名被重新編碼了。

現(xiàn)在你可以試試重新創(chuàng)建一個(gè)scss文件,里面也寫(xiě)一個(gè).ot的選擇器。在app.js中也引用這個(gè)選擇器?？词菚?huì)覆蓋掉，還是相互不影響。

有一個(gè)問(wèn)題,這個(gè)模塊化后的類(lèi)名不語(yǔ)義化，不能很好的理解這是什么意思。我們現(xiàn)在來(lái)解決這個(gè)問(wèn)題。

css-loader有一個(gè)屬性localIdentName :

    path:文件路徑:------>例如 :src-css

    name :文件名字 ----->例如: index

    local : 選擇器名字----->例如 ot

    hash:base64 ---->編碼 ：后面的數(shù)字是需要顯示編碼后的幾個(gè)數(shù)，默認(rèn)是全部顯示

執(zhí)行 npm run start  打開(kāi)Index頁(yè)面調(diào)試發(fā)現(xiàn)

這樣子類(lèi)名是不是清楚很多了呢。

如果需要把打包后的css文件放在文件夾中?？梢赃@樣做。

打包后的結(jié)構(gòu)就變成了這樣

js也可以這樣:

只需修改輸出路徑的文件名就可以了。如下：

打包的結(jié)構(gòu)是這樣的:

有一些文件我們不需要讓它模塊化，比如插件和動(dòng)畫(huà)的css等.

所以跟Js一樣，我們需要排除掉不需要模塊化的模塊.

處理圖片: 

在css中引入圖片和在js中引入圖片.如下

當(dāng)這我們應(yīng)該知道這時(shí)候運(yùn)行是會(huì)報(bào)錯(cuò)的。原因我想經(jīng)過(guò)前面的教程，你應(yīng)該了解了------>提示我們用合適的loader。

url-loader  Loads files as base64 encoded URL

安裝: npm i -D url-loader

在webpack.config.js中配置:

打包，運(yùn)行html后，圖片出來(lái)了。F12查看. 圖片被base64編碼了。

圖片太大了,我們就不需要編碼而是直接打包成圖片。

npm run start 后報(bào)錯(cuò).

這時(shí)候我們需要安裝: npm i -D file-loader 

在次打包成功后,運(yùn)行html后發(fā)現(xiàn)大于40K的圖片沒(méi)有出現(xiàn)而且圖片也確實(shí)打包出來(lái)了， F12調(diào)試后發(fā)現(xiàn)圖片路徑不對(duì). 路徑前面多了這里的路徑

所以我們要處理。

處理很簡(jiǎn)單，如下.

成功打包后, 在次打開(kāi)Html，發(fā)現(xiàn)頁(yè)面的所有東西都不見(jiàn)了。

F12. 

  文件路徑不是基于當(dāng)前目錄的，沒(méi)有加載出來(lái).

解決辦法:

    1.把dist文件夾下的文件放到磁盤(pán)跟目錄下。

    2.在publicPath哪里寫(xiě)上當(dāng)前項(xiàng)目的路徑。

    3.把dist文件夾下的文件放到服務(wù)器下。