webpack打包样式资源
转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack打包样式资源
一、创建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数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
//详细的plugins配置
//html-webpack-plugin
//功能:默认公创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
//需求:需要有结构的HTML文件
new HtmlWebpackPlugin({
//复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
template: './src/index.html'
})
],
//模式 development 开发环境，production 生产环境
mode: 'development',
// mode: 'production'
}
四、打包 css 文件的核心配置
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
]
},
//……
五、打包 less 文件的核心配置
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
//……
// loader的配置
module: {
rules: [
//打包less 文件的详细loader配置
{
//匹配哪些文件
test: /\.less$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'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 时执行顺序是从右往左，从下往上。
4、样式文件在处理后会以字符串的形式整合输出到
built.js文件当中。
