webpack配置教程(二)

            一 ： 樣式    

 在src下建立一個index.css的文件.

       寫上以下代碼：

            body{

                background-color: red;

    }

在app.js中引入這個css文件

    

        import "./index.css";        

如今咱們直接執行npm run start .看看會發生什麼.

果真出現了這個錯誤。由於webpack它自己是不認識css代碼，因此須要咱們去配置來讓它識別css代碼

css-loader --->解析css

安裝: npm i -D css-loader

咱們還須要在webpack配置文件配置。跟以前react相似。

以下:

在執行npm run start

能夠順利打包，可是打開打包後的html。發現樣式未生效，f12調試發現, css樣式根本就沒有引入到html中.

因此這時候須要有一個插件幫咱們引入

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

安裝 : npmi -D style-loader

引入-

在執行npm run start，打包成功後，在瀏覽器打開html頁面且f12打開控制檯查看,

css代碼已經被插入到當前頁面，而且生效了。

sass

    在src下建立index.scss文件,而且添加以下代碼:

                body{

                background: pink;

                }

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

--import "./index.css";

++import "./index.scss";

這時候執行npm run start,會發生什麼，我想,經歷過以前的，你必然已經想到會報錯而且知道是什麼錯誤了。

 提示咱們用合適的loader來解析scss文件。

因此咱們先安裝所須要的相關插件:

npm i -D sass-loader node-sass    

這一步安裝可能會有報錯，具體錯誤及解決辦法參考

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

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

安裝成功以後，引入.代碼以下-

執行npm run start  ，打包成功，而且運行沒問題.

目前css代碼是嵌入在js中,css樣式代碼在js很奇怪,也不方便查看。咱們須要讓css獨立出來。

因此有們又須要用到一個插件.

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

    npm i -D extract-text-webpack-plugin

在webpack.config.js添加相關和修改配置.

        一:    對象引入

                    //提取分離成獨立的css文件

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

           二:  插件中引入.

         三 :配置

    

    最後運行npm run start

                會發現報錯了。

緣由是:extract-text-webpack-plugin目前尚未webpack4版本 .可使用 npm i -D  extract-text-webpack-plugin@next解決

          詳細:https://www.cnblogs.com/running-runtu/p/8769040.html

    安裝好後,在執行 npm run start 時，打包成功且頁面沒問題。

    打包後:

css模塊化:

        css-loader有一個屬性能夠開啓模塊化. 

修改配置. 以下:

  模塊化後，咱們在js中使用css的方式改變了。

修改index.scss

        .ot{

        font-size:50px;

        }

打開app.js    模塊化後的css樣式是一個一個的模塊,因此咱們須要具體引入

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>

)

}

}

打包後,打開頁面打開控制檯。發現類名被從新編碼了。

如今你能夠試試從新建立一個scss文件,裏面也寫一個.ot的選擇器。在app.js中也引用這個選擇器。看是會覆蓋掉，仍是相互不影響。

有一個問題,這個模塊化後的類名不語義化，不能很好的理解這是什麼意思。咱們如今來解決這個問題。

css-loader有一個屬性localIdentName :

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

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

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

    hash:base64 ---->編碼 ：後面的數字是須要顯示編碼後的幾個數，默認是所有顯示

執行 npm run start  打開Index頁面調試發現

這樣子類名是否是清楚不少了呢。

若是須要把打包後的css文件放在文件夾中。能夠這樣作。

打包後的結構就變成了這樣

js也能夠這樣:

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

打包的結構是這樣的:

有一些文件咱們不須要讓它模塊化，好比插件和動畫的css等.

因此跟Js同樣，咱們須要排除掉不須要模塊化的模塊.

處理圖片: 

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

當這咱們應該知道這時候運行是會報錯的。緣由我想通過前面的教程，你應該瞭解了------>提示咱們用合適的loader。

url-loader  Loads files as base64 encoded URL

安裝: npm i -D url-loader

在webpack.config.js中配置:

打包，運行html後，圖片出來了。F12查看. 圖片被base64編碼了。

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

npm run start 後報錯.

這時候咱們須要安裝: npm i -D file-loader 

在次打包成功後,運行html後發現大於40K的圖片沒有出現並且圖片也確實打包出來了， F12調試後發現圖片路徑不對. 路徑前面多了這裏的路徑

因此咱們要處理。

處理很簡單，以下.

成功打包後, 在次打開Html，發現頁面的全部東西都不見了。

F12. 

 

  文件路徑不是基於當前目錄的，沒有加載出來.

解決辦法:

    1.把dist文件夾下的文件放到磁盤跟目錄下。

    2.在publicPath哪裏寫上當前項目的路徑。

    3.把dist文件夾下的文件放到服務器下。