學習webpack4 樣式處理

學習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 樣式處理

學習webpack4 樣式處理

相關推薦