學習webpack4 樣式處理

2021-09-12 15:31:25 字數 4187 閱讀 8265

學習webpack4 - 基礎配置

學習webpack4 - html處理

學習webpack4 - 樣式處理

學習webpack4 - es6語法轉化

學習webpack4 - 第三方庫的使用

學習webpack4 - 抽離公共部分

...持續中

注意:開始之前以下內容之前,需要配置一些webpack的基礎配置,傳送門:學習webpack4.x - 基礎配置

當前目錄為:

我是乙個html原檔案,我想打包後自動把打包後的js插入到我的檔案中, 並且把我自動放到打包後的那個目錄中...

,

"devdependencies":

}

let path = require('path');

let htmlwebpackplugin = require('html-webpack-plugin');

module.exports = ,

entry: './src/index.js',

output: ,

//外掛程式配置

plugins: [

new htmlwebpackplugin()

]}

下面開始配置css:

step1: 開啟src目錄,新建index.css檔案,並輸入:

body
step2: 開啟src目錄的index.html,直接把index.css檔案引入,如下:

嘗試執行: npm run dev,成功, 結果如下:

檢視編譯好的dist目錄發現,這種直接引用css的方法雖然沒有報錯,但是在dist/index.html中只是原封不動的把輸出了,css並沒有生效,所以這種直接引入的方法不可行,那麼怎麼樣把css引入進來呢?方法如下:

step1:開啟src/index.js檔案,引入要編譯的css檔案:index.css

require('./index.css');
嘗試執行:npm run dev, 結果如下:

報了個錯說需要乙個合適的loader來處理這個css檔案,接下來進行相應的配置:

step2: 開啟webpack.config.js檔案,進行module配置:

// 模組配置

module: ]},

安裝style-loader, css-loader:

yarn add style-loader css-loader -d
嘗試執行:npm run dev,body背景顏色變紅,成功!結果如下:

上邊那種方式是把css直接插入到了html中,如圖:

這樣很亂,我們可以抽離css,引入到html中,方法如下:

step1: 安裝mini-css-extract-plugin外掛程式:

yarn add mini-css-extract-plugin -d
step2: 開啟webpack.config.js檔案,進行配置:

let minics***tractplugin = require('mini-css-extract-plugin'); //抽離css

//外掛程式配置

plugins: [

new minics***tractplugin()

] // 模組配置

module: ]

},

嘗試執行:npm run dev, 抽離成功, 這裡index.css, index.scss檔案合併在一起被生成了乙個main.css,引入到了dist/index.html檔案中,如圖:

step1:開啟src目錄,新建index.less檔案,並輸入:

body 

}

step2: 開啟src/index.js檔案,引入index.less檔案:

require('./index.less');
step3: 開啟webpack.config.js檔案,修改module部分:

// 模組配置

module: ,]},

step4: 安裝less, less-loader:

yarn add less less-loader -d
嘗試執行:npm run dev,成功!結果如下:

step1: 基礎目錄配置之後,開啟webpack.config.js檔案,配置module部分:

// 模組配置

module: , ]},

step2: 安裝node-sass, sass-loader:

yarn add node-sass sass-loader -d
step3: 嘗試執行:npm run dev,成功!

我們在寫css的時候,遇到一些css3語法需要加瀏覽器字首去相容,每次寫-webkit-之類的字首很麻煩,有一種方法自動給css加上這種字首,如下:

step1: 配置webpack.config.js檔案

// 模組配置

module: ]

},

step2: 增加配置檔案postcss.config.js,並配置如下:

module.exports =
step3: 安裝外掛程式:

yarn add postcss-loader autoprefixer -d
嘗試執行:npm run dev, 成功,如圖:

專案上線前打包的時候,想把編譯好的css, js檔案壓縮了怎麼處理呢?需要優化項外掛程式optimize-css-assets-webpack-plugin,uglifyjs-webpack-plugin方法如下:

step1: 配置webpack.config.js檔案

let optimizecssplugin = require('optimize-css-assets-webpack-plugin'); //壓縮css

let uglifyjsplugin = require('uglifyjs-webpack-plugin'); //壓縮js

//優化項配置

optimization: )

]},

step2: 安裝外掛程式

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -d
嘗試打包: npm run build, 結果如下:

學習webpack4 樣式處理

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共部分 持續中 注意 開始之前以下內容之前,需要配置一些webpack的基礎配置,傳送門 學習w...

學習webpack4 樣式處理

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共部分 持續中 注意 開始之前以下內容之前,需要配置一些webpack的基礎配置,傳送門 學習w...

學習webpack4 樣式處理

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共部分 持續中 注意 開始之前以下內容之前,需要配置一些webpack的基礎配置,傳送門 學習w...