一、webpack 提取 css 成单独的文件
-
创建空文件夹,通过
npm init
命令初始化package.json
文件,通过npm install webpack webpack-cli -g
命令全局下载webpack
和webpack-cli
,通过npm install webpack webpack-cli -D
命令本地下载webpack
和webpack-cli
,通过npm i style-loader css-loader -D
命令下载style-loader
和css-loader
,通过npm i mini-css-extract-plugin -D
命令下载mini-css-extract-plugin
,通过npm i html-webpack-plugin
命令下载html-webpack-plugin
。 -
创建
src
文件夹,里面创建css
、js
文件夹以及index.html
文件。css
文件夹中放样式文件,a.css
和b.css
,js
文件夹中放index.js
,代码如下所示:
- a.css
#box1 { width: 100px; height: 100px; background-color: pink; }
- b.css
#box2 { width: 200px; height: 200px; background-color: deeppink; }
- index.js
import '../css/a.css'; import '../css/b.css';
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
- 创建
webpack.config.js
文件,通过require
引入path
、html-webpack-plugin
和mini-css-extract-plugin
。entry
是入口文件,output
是出口文件,filename
是打包输出后的文件名,path
是输出路径。module
是loader
的配置,rules
是详细的loader
配置。第一个规则是匹配以.css
结尾的文件,使用的loader
是MiniCssExtractPlugin.loader
和css-loader
。如果使用style-loader
就会创建style
标签,将样式放入,使用css-loader
就会将css
文件整合到js
文件中,所以通过MiniCssExtractPlugin.loader
取代style-loader
,提取js
中的css
成单独文件。plugins
里面是一些插件配置,通过new HtmlWebpackPlugin()
,复制里面的文件,并自动引入打包输出的所有资源(JS/CSS
),通过MiniCssExtractPlugin
提取css
以及对输出的css
文件进行重命名 。设置mode
模式为development
开发模式,代码如下所示:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
text: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
}
- 在命令行输入
webpack
命令,资源就会进行打包,同时在build
文件夹中,多出一个js
和css
的打包输出文件。同时,还可以打开index.html
,发现样式也已经生效了。
二、webpack 配置 css 兼容性处理
-
创建空文件夹,通过
npm init
命令初始化package.json
文件,通过npm install webpack webpack-cli -g
命令全局下载webpack
和webpack-cli
,通过npm install webpack webpack-cli -D
命令本地下载webpack
和webpack-cli
,通过npm i style-loader css-loader -D
命令下载style-loader
和css-loader
,通过npm i mini-css-extract-plugin -D
命令下载mini-css-extract-plugin
,通过npm i html-webpack-plugin
命令下载html-webpack-plugin
,通过npm i postcss-loeader postcss-preset-env -D
命令下载postcss-loeader
和postcss-preset-env
。 -
创建
src
文件夹,里面创建css
、js
文件夹以及index.html
文件。css
文件夹中放样式文件,a.css
和b.css
,js
文件夹中放index.js
,代码如下所示:
- a.css
#box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; }
- b.css
#box2 { width: 200px; height: 200px; background-color: deeppink; }
- index.js
import '../css/a.css'; import '../css/b.css';
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
- 创建
webpack.config.js
文件,通过require
引入path
、html-webpack-plugin
和mini-css-extract-plugin
。entry
是入口文件,output
是出口文件,filename
是打包输出后的文件名,path
是输出路径。module
是loader
的配置,rules
是详细的loader
配置。第一个规则是匹配以.css
结尾的文件,通过use
使用loader
,里面是数组。使用MiniCssExtractPlugin.loader
取代style-loader
,作用是提取js
中的css
成单独文件,使用css-loader
将css
文件整合到js
文件中,使用postcss-loader
,进行配置,ident
为固定写法,使用postcss-preset-env
这个postcss
的插件。plugins
里面是一些插件配置,通过new HtmlWebpackPlugin()
,复制里面的文件,并自动引入打包输出的所有资源(JS/CSS
),通过MiniCssExtractPlugin
提取css
以及对输出的css
文件进行重命名 。设置mode
模式为development
开发模式,代码如下所示:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
text: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
})
],
mode: 'development'
}
- 在
package.json
这个文件中,进行配置browserslist
,在css
兼容处理的时候,需要帮postcss
找到package.json
中browserslist
里面的配置,通过配置加载指定的css
兼容性样式,development
为开发环境配置,last 1 chrome version
表示兼容最近的chrome
版本,last 1 firefox version
表示兼容最近的firefox
版本,last 1 safari version
表示兼容最近的safari
版本。production
为生产环境配置,>0.2%
表示大于99.8%
的浏览器,not dead
表示不要已经死的浏览器,not op_mini all
表示不要使用op_mini all
浏览器,代码如下所示:
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
- 在命令行输入
webpack
命令,资源就会进行打包,同时在build
文件夹中,多出一个js
和css
的打包输出文件。同时,还可以打开index.html
,发现样式也已经生效,css
的代码也已经做了兼容性处理。
三、webpack 配置 css 压缩
-
css
的压缩在上面的css
兼容性的项目上进行更改,通过npm i optimize-css-assets-webpack-plugin -D
命令下载optimize-css-assets-webpack-plugin
这个css
压缩的插件。 -
在
webpack.config.js
文件中,在plugins
中加入new OptimizeCssAssetsWebpackPlugin()
这一行的css
压缩配置,代码如下所示:
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
process.env.NODE_ENV = 'development';
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
text: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'css/built.css'
}),
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
}
- 在命令行输入
webpack
命令,资源就会进行打包,同时在build
文件夹中,多出一个js
和css
的打包输出文件。同时,还可以打开index.html
,发现样式也已经生效了,css
的代码也会进行压缩了。