学习webpack4 - 样式处理
学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方库的使用
学习webpack4 - 抽离公共部分
...持续中
=======================================================
样式处理
注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门：学习webpack4.x - 基础配置
当前目录为：
- index.html文件内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>丸子</title> </head> <body> <div>我是一个html原文件，我想打包后自动把打包后的js插入到我的文件中， 并且把我自动放到打包后的那个目录中...</div> </body> </html>
- package.json文件内容：
{
"name": "webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack --mode development && webpack-dev-server",
"build": "webpack --mode production"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.4",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"webpack-html-plugin": "^0.1.1"
}
}- webpack.config.js文件内容：
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// mode: 'development',
//开一个本地服务
devServer: {
port: 3000, //端口号
progress: true, //进度条
contentBase: './dist', //指定目录运行服务
open: true //自动打开浏览器
},
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
//插件配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', //原始文件
filename: 'index.html', //编译后的文件名称
hash: true, //hash
})
]
}下面开始配置css：
css配置
- 首先看看这种直接引入css的方法行不行：
step1: 打开src目录，新建index.css文件，并输入：
body {
background: red;
}step2: 打开src目录的index.html，直接把index.css文件引入，如下：
<link rel="styleSheet" href="./index.css" />
尝试运行： npm run dev，成功， 结果如下：
查看编译好的dist目录发现，这种直接引用css的方法虽然没有报错，但是在dist/index.html中只是原封不动的把<link rel="styleSheet" href="./index.css" />输出了，css并没有生效，所以这种直接引入的方法不可行，那么怎么样把css引入进来呢？方法如下：
- 把css作为模块引入文件：
step1：打开src/index.js文件，引入要编译的css文件：index.css
require('./index.css');尝试运行：npm run dev, 结果如下：
报了个错说需要一个合适的loader来处理这个css文件，接下来进行相应的配置：
step2: 打开webpack.config.js文件，进行module配置:
// 模块配置
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},安装style-loader, css-loader:
yarn add style-loader css-loader -D
尝试运行：npm run dev，body背景颜色变红，成功！结果如下：
补充
- loader：webpack编译对于css，图片，或者其他的语法集比如jsx等这些是没有办法直接加载的，需要对应的loader把资源进行转化并加载，执行顺序：从右到左，从下到上。
- css-loader: 解析css中的代码，像是@import这种语法，比如在index.css中引入另一个other.css文件，需要@import './other.css'。
- style-loader: 将css模块作为样式插入到DOM中。
抽离css文件
上边那种方式是把css直接插入到了html中，如图：
这样很乱，我们可以抽离css，引入到html中，方法如下：
step1: 安装mini-css-extract-plugin插件：
yarn add mini-css-extract-plugin -D
step2: 打开webpack.config.js文件，进行配置：
let MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离CSS
//插件配置
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css' //抽离出的css文件名称
//filename: 'css/main.css //抽离出的css文件存放在css目录下
})
]
// 模块配置
module: {
rules: [{
test: /\.(css|scss)$/,
//将style-loader 改为 MiniCssExtractPlugin.loader，表示该类型的文件会被抽离成一个独立css文件，link引入到html中。
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}]
},尝试运行：npm run dev, 抽离成功， 这里index.css, index.scss文件合并在一起被生成了一个main.css，引入到了dist/index.html文件中，如图：
less配置
step1：打开src目录，新建index.less文件，并输入：
body {
div {
width: 500px;
height: 500px;
background: yellow;
}
}step2: 打开src/index.js文件，引入index.less文件：
require('./index.less');step3: 打开webpack.config.js文件，修改module部分：
// 模块配置
module: {
rules: [
{test: /\.(css | less)$/, use: ['style-loader', 'css-loader', 'less-loader']},
]
},step4: 安装less, less-loader：
yarn add less less-loader -D
尝试运行：npm run dev，成功！结果如下：
scss配置
step1: 基础目录配置之后，打开webpack.config.js文件，配置module部分：
// 模块配置
module: {
rules: [
{test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
},step2: 安装node-sass, sass-loader：
yarn add node-sass sass-loader -D
step3: 尝试运行：npm run dev，成功！
给css加前缀
我们在写css的时候，遇到一些css3语法需要加浏览器前缀去兼容，每次写-webkit-之类的前缀很麻烦，有一种方法自动给css加上这种前缀，如下：
step1: 配置webpack.config.js文件
// 模块配置
module: {
rules: [{
test: /\.(css|scss)$/,
//增加postcss-loader
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}]
},step2: 增加配置文件postcss.config.js,并配置如下:
module.exports = {
plugins: [require('autoprefixer')]
}step3: 安装插件：
yarn add postcss-loader autoprefixer -D
尝试运行：npm run dev， 成功，如图：
优化项配置
项目上线前打包的时候，想把编译好的css, js文件压缩了怎么处理呢？需要优化项插件optimize-css-assets-webpack-plugin，uglifyjs-webpack-plugin方法如下：
step1: 配置webpack.config.js文件
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css
let UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js
//优化项配置
optimization: {
minimizer: [
new OptimizeCssPlugin(), //压缩css
//压缩js
new UglifyJsPlugin({
cache: true, //缓存
parallel: true, //并发打包
sourceMap: true //源码映射便于调试
})
]
},step2: 安装插件
yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
尝试打包： npm run build, 结果如下：
