webpack打包樣式資源
轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack打包樣式資源
一、創(chuàng)建html文件、 css 文件或 less 文件
<!-- 文件路徑 ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 學習</title>
</head>
<body>
<h1 id="title">hello webpack</h1>
</body>
</html>
/* 路徑： ./src/index.css */
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: Dpink;
}
// 路徑： ./src/index.less
#title{
color: #fff;
}
二、引入 css 文件或 less 文件
在 index.js 文件中引入 css 文件
// index. js: webpack入口起點文件
// 路徑： ./src/index.js
// 引入樣式資源
import ../index.css';
import ../index.less';
//……
三、配置 webpack配置文件
// webpack.config.js webpack的配置文件
// 作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
// loader: 1.下載 2.使用(配置loader)
// plugins: 1.下載2. 引入 3.使用
// 路徑： ./webpack.config.js
// resolve用來拼接絕對路徑的方法
const { resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack配置
// 入口起點文件
entry: './src/index.js',
// 輸出
output: {
//輸出文件名
filename: 'built.js',
//輸出路徑
//__dirname nodejs的變量,代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
//打包 css 文件的詳細loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader進行處理
use: [
// use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
//創(chuàng)建style標簽,將js中的樣式資源插入進行,添加到head中生效
'style-loader',
//將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
'css-loader'
]
},
//打包less 文件的詳細loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
//創(chuàng)建style標簽,將js中的樣式資源插入進行,添加到head中生效
'style-loader',
//將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
'css-loader',
//將less文件編譯成css文件
//需要下載less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
//詳細的plugins配置
//html-webpack-plugin
//功能:默認公創(chuàng)建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
//需求:需要有結構的HTML文件
new HtmlWebpackPlugin({
//復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html'
})
],
//模式 development 開發(fā)環(huán)境，production 生產(chǎn)環(huán)境
mode: 'development',
// mode: 'production'
}
四、打包 css 文件的核心配置
// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包 css 文件的詳細loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader進行處理
use: [
// use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
//創(chuàng)建style標簽,將js中的樣式資源插入進行,添加到head中生效
'style-loader',
//將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
'css-loader'
]
},
]
},
//……
五、打包 less 文件的核心配置
// webpack.config.js webpack的配置文件
// 路徑： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包less 文件的詳細loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader進行處理
use: [
// use數(shù)組中l(wèi)oader執(zhí)行順序:從右到左,從下到上依次執(zhí)行
//創(chuàng)建style標簽,將js中的樣式資源插入進行,添加到head中生效
'style-loader',
//將css文件變成commonjs模塊加載js中,里面內(nèi)容是樣式字符串
'css-loader',
//將less文件編譯成css文件
//需要下載less-loader和less
'less-loader'
]
}
]
},
//……
六、安裝對應 loader
# 安裝 style-loader和css-loader
> npm i css-loader style-loader -D
# 安裝 less-loader 和 less
> npm i less less-loader -D
七、運行
> webpack
- 結論：
1、打包css 文件樣式資源主要使用
style-loader和css-loader。2、打包less 文件樣式資源主要使用
style-loader、css-loader和less-loader。3、多個 loader 時執(zhí)行順序是從右往左，從下往上。
4、樣式文件在處理后會以字符串的形式整合輸出到
built.js文件當中。
浙公網(wǎng)安備 33010602011771號