一、webpack 打包 style-loader
-
创建一个空文件夹,通过
npm init
初始化创建package.json
文件,通过npm install webpack --save-dev
命令下载webpack
,通过npm install style-loader css-loader --save-dev
命令下载style-loader
和css-loader
。 -
创建
css
文件夹,在里面创建base.css
和common.css
,代码如下所示:
- base.css
html {
background-color: blueviolet;
}
- common.css
body {
font-size: 20px;
}
- 创建
app.js
文件,引入base.css
和common.css
,use
代表样式的使用,unuse
代表样式的不使用。同时也创建css.transform.js
文件,代码如下所示:
- app.js
import base from './css/base.css'
import common from './css/common.css'
var flag = false
setInterval(function () {
if (flag) {
base.unuse()
} else {
base.use()
}
flag = !flag
}, 500)
- common.css
module.exports = function (css) {
console.log(css)
if (window.innerWidth >= 768) {
return css.replace('blueviolet', 'red')
} else {
return css.replace('blueviolet', 'green')
}
}
- 创建
webpack.config.js
文件,通过require
引入path
路径,entry
配置入口文件,output
配置出口文件,配置output
、publicPath
和filename
。配置rules
,test
表示匹配的值为以.css
文件结尾的,use
表示使用的各种loader
。style-loader
是创建一个style
标签,style-loader/url
是在html
中插入一个link
标签(配合file-loader
使用),一个很小众的功能,会把每个import
的css
都处理成一个link标签,造成加载资源的增加,不利于优化。style-loader/useable
是在style
中控制样式插入或者不插入,import
了css
后可以使用.use()
或者.unuse()
的方法来控制样式是否插入。file-loader
是生成一个新的css
文件。css-loader
是允许js
来import
一个css
文件。所以,使用style-loader
和css-loader
。在style-loader
进行options
配置,insertInto
是插入到DOM
,singleton
是是否只使用一个style
标签,会将多个引入混合为一个style
标签插入页面,transform
是可以执行一个js
,在loader
执行的时候执行,也就是浏览器环境,能拿到浏览器的相关信息,insertAt
是插入位置 ,代码如下所示:
var path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
insertInto: '#app',
singleton: true,
transform: './css.transform.js'
}
},
{
loader: 'css-loader'
}
]
}
]
}
}
二、webpack 打包 css-loader
- 按照之前
style-loader
所创建的项目进行更改,更改base.css
、common.css
和app.js
文件,同时也将common.css
通过composes
引入到base.css
中,代码如下所示:
-
common.css
body { font-size: 20px; } .bigBox { border: 2px solid #333; }
-
base.css
html { background-color: blueviolet; } .box { composes: bigBox from './common.css'; height: 200px; width: 200px; border-radius: 20px; border: 4px; background-color: cadetblue; }
-
app.js
import base from './css/base.css' import common from './css/common.css' var app = document.getElementById('app') app.innerHTML = '<div class="'> + base.box +'"</div>'
- 在
webpack.config.js
文件中,更改css-loader
的配置信息。在options
配置信息中,alias
是解析的别名,importLoader
是@import
引入其它的loader
,Minimize
是是否开启压缩,modules
是是否启用css-modules
模块化。通过: local
可以使用局部的样式,通过: global
可以使用全局的样式,通过compose
可以继承一段样式,通过compose … from path
可以引入一段样式,通过localIdentName: '[path][name]__[local]--[hash:base64:5]'
可以定义编译出来的class
名称,代码如下所示:
var path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
transform: './css.transform.js'
}
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
}
]
}
]
}
}
三、webpack 打包配置 Less 和 Sass
-
通过
npm install less-loader less --save-dev
命令下载less
,通过npm install sass-loader node-sass --save-dev
命令下载sass
。 -
按照上面的项目文件,更改
base.css
和common.css
为base.less
和common.less
,代码如下所示:
-
base.less
@homeColor: red; html { background-color: @homeColor; } .box { composes: bigBox from './common.less'; height: 200px; width: 200px; border-radius: 20px; border: 4px; background-color: cadetblue; }
-
common.less
body { font-size: 20px; } .bigBox { border: 2px solid #333; }
- 在
webpack.config.js
文件中,添加less-loader
,代码如下所示:
var path = require('path')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: './dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,
transform: './css.transform.js'
}
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]_[local]_[hash:base64:5]'
}
},
{
loader: 'less-loader'
}
]
}
]
}
}