傳送門:
webpack4系列教程(一):初識webpack
webpack4系列教程(二):創建項目,打包第一個JS文件
webpack4系列教程(三):自動生成項目中的HTML文件
webpack4系列教程(四):處理項目中的資源文件(一)
1. 在項目中使用 less
在 src/assets/ 下新建 common.less :
body{
background: #fafafa;
padding: 20px;
}
在 main.js 中引入 common.less :
import './assets/style/common.less'
安裝 less-loader:
npm i less-loader -D
添加 rules:
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
打包之後,在瀏覽器打開 dist/index.html,less文件中的樣式已經通過 style 標籤載入了:
2. 使用MiniCssExtractPlugin
我們之前的樣式代碼都是通過 style 標籤載入的,那麼如何通過 link 引入CSS文件的方式實現呢?
這就需要使用一個插件,在webpack3中通常使用ExtractTextWebpackPlugin,但是在webpack4中已經不再支持ExtractTextWebpackPlugin的正式版,而測試版本又不夠穩定,因此我們使用MiniCssExtractPlugin替代。首先安裝:
npm install --save-dev mini-css-extract-plugin
在webpack.config.js 中引入並添加 plugins :
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
filename: "[name].css"
}),
修改 CSS 和 less 的 rules:
{
test: /.css$/,
use: [
// 'style-loader',
{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
]
},
{
test: /.less$/,
use: [
// 'style-loader',
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'less-loader'
]
}
npm run build 之後,可見head中引入了一個 main.css 文件:
也正是我們在 common.less 和 modal.css 中的代碼
3. postcss-loader
postcss-loader 可以幫助我們處理CSS,如自動添加瀏覽器前綴。
npm i -D postcss-loader autoprefixer
在根目錄下創建 postcss.config.js:
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer({
browsers: ['last 5 version']
})
]
}
修改 css 和 less 的 rules:
{
test: /\.css$/,
use: [
// 'style-loader',
{
loader: MiniCssExtractPlugin.loader
},
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
// 'style-loader',
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'postcss-loader',
'less-loader'
]
}
在 modal.css中加入:
.flex{
display: flex;
}
打包之後打開 main.css,可見瀏覽器前綴已經加上了:
本人才疏學淺,不當之處歡迎批評指正