一、webpack使用css樣式
webpack預設是支援js的,對於別的css或者typescript必須要安裝載入器
-
1、安裝包
npm install style-loader css-loader less less-loader -D 複製程式碼 -
2、在
webpack.config.js中的module配置規則(use中是一個陣列,從後面解析到前面)... module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }, // 是從右邊開始讀取到左邊的 ] } ] }, ... 複製程式碼 -
3、在
src中建立一個css的資料夾,裡面建立a.css和b.less檔案 -
4、在
index.js中引入樣式檔案import './css/a.css'; import './css/b.less'; 複製程式碼 -
5、啟動服務,檢視瀏覽器
Elements欄
二、將樣式檔案抽取成一個單獨的檔案
上面的方式雖然可以載入樣式檔案,但是載入出來的全部的以
<style type="text/css">....</style>的方式到頁面中(我們在開發的時候可以這樣,但是專案上線後的就希望是單獨的檔案),增加了js檔案的體積,如果專案大,可能會造成js檔案過大載入慢,甚至載入不出的弊端。
-
1、抽取單獨的
css目前主要有2個包可以選擇- 使用外掛
extract-text-webpack-plugin@next - 使用外掛
mini-css-extract-plugin(今後取代上面那個外掛的包)
- 使用外掛
-
2、安裝包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D 複製程式碼 -
3、使用
extract-text-webpack-plugin@next外掛的方式-
1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin'); 複製程式碼 -
2.修改
module中的載入器module: { rules: [ { test: /\.css$/, use: ExtractTextWebpackPligin.extract({ use: [ // { loader: 'style-loader' }, 注意這個地方要刪除 { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' } ] }) } ] }, ... 複製程式碼 -
3.使用外掛
plugins: [ ... new ExtractTextWebpackPligin({ filename: 'css/index.css', }), new HtmlWebpackPlugin({ template: './src/index.html', title: 'webpack測試', hash: true, // 先註釋下面的程式碼,更好看結果 // minify: { // removeAttributeQuotes: true, // 去除雙引號 // collapseWhitespace: true, // 合併程式碼到一行 // } }) ], 複製程式碼 -
4、在
index.js中依然是匯入css檔案import './css/a.css'; import './css/b.less'; 複製程式碼
-
-
4、使用
mini-css-extract-plugin外掛方式-
1.導包
const MiniCssTractPlugin = require('mini-css-extract-plugin'); 複製程式碼 -
2.在
module中配置module: { rules: [ { test: /\.css$/, use: [ MiniCssTractPlugin.loader, { loader: 'css-loader' } ] }, { test: /\.less$/, use: [ MiniCssTractPlugin.loader, { loader: 'css-loader' }, { loader: 'less-loader' } ] } ] }, 複製程式碼 -
3.配置外掛
plugins: [ ... new MiniCssTractPlugin({ filename: 'css/css.css', }), ] 複製程式碼 -
4.一樣的在
index.js中導包 -
5.測試
-
三、對上面抽取樣式優化(抽取出多個樣式檔案)
-
1、上面的方法是將全部的
css,less抽取成一個css檔案,如果我們要抽取成單獨的檔案... // 定義兩個檔案 let cssExtract = new ExtractTextWebpackPligin('css/css.css'); let lessExtract = new ExtractTextWebpackPligin('css/less.css'); plugins: [ // 使用前面定義的外掛 cssExtract, lessExtract, new webpack.HotModuleReplacementPlugin(), // 熱更新,每次修改後會自動重新整理 new CleanWebpackPlugin(), // 每次打包清空dist資料夾 ...HtmlPlugin, ], module: { rules: [ { test: /\.css$/, use: cssExtract.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: lessExtract.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' } ] }) } ] }, 複製程式碼 -
2、打包
四、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上style中)
-
1.定義
disableconst cssExtract = new ExtractTextWebpackPligin({ filename: 'css/a.css', disable: true, }); const lessExtract = new ExtractTextWebpackPligin({ filename: 'css/b.css', disable: true, }); 複製程式碼 -
2.在
modul中使用module: { rules: [ { test: /\.css$/, use: cssExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: lessExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' }, { loader: 'less-loader' }, ] }) } ] }, 複製程式碼
五、關於抽取樣式的時候刪除未使用的樣式(減少樣式打包的體積)
-
1、安裝包
npm install purifycss-webpack purify-css glob -D 複製程式碼 -
2、匯入
const PurifycssWebpack = require('purifycss-webpack'); const glob = require('glob'); 複製程式碼 -
3、使用
... // 注意必須要在HtmlWebpackPlugin後面使用 new PurifycssWebpack({ paths: glob.sync(path.resolve('src/*.html')) }) ... 複製程式碼
六、使用postcss
關於postcss的介紹,提供另外一篇中文文章連線地址
-
1、使用
postcss實現該功能 -
2、安裝包
npm install postcss-loader autoprefixer -D 複製程式碼 -
3、配置
postcss-loader的載入器... { test: /\.css$/, use: cssExtract.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader' }, { loader: 'postcss-loader'}, ] }) }, ... 複製程式碼 -
4、專案下新建立一個
postcss.config.js的配置檔案module.exports = { plugins: [ require('autoprefixer') ] } 複製程式碼 -
5、在
a.css中寫上css3的樣式body { background: cyan; transform:rotate(30deg); } 複製程式碼 -
6、執行命令
npm run build檢視生成的檔案
七、對樣式檔案進行壓縮
-
1、安裝包
npm install optimize-css-assets-webpack-plugin -D 複製程式碼 -
2、引入
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') 複製程式碼 -
3、普通壓縮
plugins: [ cssExtract, lessExtract, new OptimizeCSSAssetsPlugin(), ... ], 複製程式碼 -
4、處理壓縮
new OptimizeCSSAssetsPlugin ({ // 預設是全部的CSS都壓縮，該欄位可以指定某些要處理的檔案 assetNameRegExp: /\.(sa|sc|c|le)ss$/g, // 指定一個優化css的處理器，預設cssnano cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: [ 'default', { discardComments: { removeAll: true}, //對註釋的處理 normalizeUnicode: false // 建議false,否則在使用unicode-range的時候會產生亂碼 }] }, canPrint: true // 是否列印編譯過程中的日誌 }), 複製程式碼