css文件怎么進行打包

這篇文章主要為大家展示了“css文件怎么進行打包”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css文件怎么進行打包”這篇文章吧。

　　css文件打包

　　Loaders是webpack最重要的功能之一，可以通過不同loader，從而對不同文件格式進行特定處理

　　Loaders是在module模塊里面

　　簡單的舉幾個Loaders使用例子：

　　可以把SASS文件的寫法轉換成CSS，而不在使用其他轉換工具。

　　可以把ES6或者ES7的代碼，轉換成大多瀏覽器兼容的JS代碼。

　　可以把React中的JSX轉換成JavaScript代碼。

　　注意：所有的Loaders都需要在npm中單獨進行安裝，并在webpack.config.js里進行配置。下面我們對Loaders的配置型簡單梳理一下。

　　test：用于匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；

　　use：loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，否則報錯；

　　include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；

　　query：為loaders提供額外的設置選項（可選）

　　打包css文件

　　在src目錄下創建一個css文件夾，在文件夾里建立index.css文件

　　./src/css/index.css

　　body{

　　background-color:red;

　　color:white;

　　}

　　CSS文件建立好后，需要引入到入口文件中，才可以打包到，這里我們引入到entry.js中。

　　/src/entery.js中在首行加入代碼：

　　importcssfrom‘./css/index.css’;

　　CSS和引入做好后，我們就需要使用loader來解析CSS文件,分別是style-loader和css-loader。

　　style-loader:

　　它是用來處理css文件中的url()等，npm中的網址：https://www.npmjs.com/package/style-loader

　　用npminstall進行項目安裝：安裝style-loader和css-loader一定要注意，他們的代碼不一樣

　　npminstallstyle-loader–save-dev

　　css-loader：

　　它是用來將css插入到頁面的style標簽。npm中的網址：https://www.npmjs.com/package/css-loader

　　用npminstall進行項目安裝：

　　npminstall–save-devcss-loader

　　兩個loader都下載安裝好后，我們就可以配置我們loaders了。

　　loaders配置：

　　webpack.config.js

　　module:{

　　rules:[{

　　test:/\.css$/,

　　use:['style-loader','css-loader']

　　}]

　　},

　　module里面寫法有3種

　　1、use:[‘style-loader’,‘css-loader’

　　2、loader:[‘style-loader’,’css-loader’]

　　3、

　　use:[{

　　loader:'style-loader'},{

　　loader:'css-loader'}]

以上是“css文件怎么進行打包”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！