学习webpack4 - 样式处理
脚本宝典收集整理的这篇文章主要介绍了学习webpack4 - 样式处理，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方库的使用
学习webpack4 - 抽离公共部分
...持续中
=======================================================
样式处理
注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门：学习webpack4.x - 基础配置
当前目录为：
<!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>
{
"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背景颜色变红，成功！结果如下：
-
补充
抽离css文件
上边那种方式是把css直接插入到了html中，如图：
这样很乱，我们可以抽离css，引入到html中，方法如下：
step1: 安装mini-css-extract-plugin插件：
yarn add mini-css-extract-plugin -Dstep2: 打开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文件中，如图：
@H_427_512@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 -Dstep3: 尝试运行：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, 结果如下：
脚本宝典总结
以上是脚本宝典为你收集整理的学习webpack4 - 样式处理全部内容，希望文章能够帮你解决学习webpack4 - 样式处理所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- vuex 基本入门和使用（二） 2019-08-19
- 默认参数如何在JavaScript ES6中工作 2018-11-14
- JavaScript ES6功能：好的部件 2018-11-14
- 如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
- 如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
- 关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
- 5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
- 分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
- JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
- 什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12