webpack4.0 基础配置3(css)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了webpack4.0 基础配置3(css)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4935字，纯文字阅读大概需要8分钟。
内容图文
1. 安装常见css预处理器的loader
npm install css-loader style-loader less less-loader autoprefixer postcss-loader --save-dev
注意：
1）autoprefixer postcss-loader 为兼容配置
2) 配置sacc的话：sass node-sass sass-loader
// 配置webpack加载器(loader)
module: {
// 设置规则和处理方案 默认执行顺序：从右到左，从下到上
rules: [
{
test: /\.(css|less)$/i,
use: [
"style-loader", // 把处理好的css插入到页面中（通过内嵌式）
"css-loader", // 处理 @import/url 这种语法
"postcss-loader", // 设置css前缀(处理兼容 需要搭配autoperfixer一起使用，需要额外配置一些信息，在根目录下新建postcss.config.js文件进行配置)
"less-loader" // 将less => css（一定是最底下的，它是基础）
// 补充：
/*
1. 加载器还可以进行具体配置
{
loader: 'less-loader',
options: {
...
}
}
2. 自己指定要兼容哪些浏览器 ( https://github.com/browserslist/browserslist)
在 package.json 文件中添加 browserslist.
{
"browserslist": [
">1%", // 表示要兼容 99% 的浏览器
"last 2 versions" // 兼容浏览器最近的2个版本
]
}
*/
]
}
]
}
用 style-loader style 是内嵌式的（<script>...</script>）,要抽离css，以 link外链的方式进行导入时，需要用到 mini-css-extract-plugin插件。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// 配置webpack的插件
plugins: [
// 用 MiniCssExtractPlugin 抽离css到单独的文件中，style-loader应该被换为 MiniCssExtractPlugin.loader
new MiniCssExtractPlugin({
filename: '[name].[hash].min.css' // 导出的css文件名
})
],
// 配置webpack加载器(loader)
module: {
// 设置规则和处理方案 默认执行顺序：从右到左，从下到上
rules: [
{
test: /\.(css|less)$/i,
use: [
// "style-loader", // 把处理好的css插入到页面中（通过内嵌式）
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]
}
]
}
}
2. 优化项配置
css压缩
安装
npm install optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin terser-webpack-plugin --save-dev
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 配置webpack的优化项
optimization: {
// 配置压缩方式
minimize: true, // 需要添加这个属性，否则可能无法压缩，可能是因为webpack版本的问题。
minimizer: [
// 压缩css（但是必须指定js的压缩方式）
new OptimizeCssAssetsWebpackPlugin(),
// 压缩js
// new UglifyjsWebpackPlugin({
// cache: true, // 是否使用缓存
// parallel: true, // 是否是并发编译
// sourceMap: true // 启动源码映射（方便调试）
// }),
// 压缩js
new TerserWebpackPlugin()
]
},
图片
npm install file-loader url-loader html-withimg-loader --save-dev
html-withimg-loader 这个是处理 html 中的 图片。
file-loader、 url-loader 是处理 css / js 中的 图片。
注意：若 图片是 url-loader 处理的，当不满足limit条件时，会自动用file-loader处理。
真实项目中的图片
- css中设置背景图片
- js中动态创建图片
- html中直接写图片
// 配置webpack加载器(loader)
module: {
// 设置规则和处理方案 默认执行顺序：从右到左，从下到上
rules: [
{
// 图片处理
test: /\.(png|jpe?g|gif|ico|bmp)$/i,
// use: "file-loader" // 或 ["file-loader"]
use: [{
// url-loader在编译的时候，会把符合条件的图片进行base64，对不符合条件的还是继续使用
// file-loader处理。
loader: 'url-loader',
options: {
limit: 1 * 1024, // 若小于这个范围内的，均转为base64
// outputPath: './images', // 在编译的时候，把图片都放在统一的images文件夹下
name: 'images/[name].[hash].[ext]', // 直接将生成的图片放入 images 中。
// esModule: false, // 在 html中 添加图片时，要设置。
}
}]
},
{
// 字体图标的处理 file-loader 就是编译图片的加载器
test: /\.(svg|eot|ttf|woff|woff2)$/i,
use: [{
loader: 'file-loader',
options: {
// 不适用base64
name: 'images/[name].[hash].[ext]'
}
}]
},{
// 处理html页面中的图片 html-withimg-loader
test: /\.html$/,
use: ['html-withimg-loader']
}
]
}
// 在 js 中动态创建图片
// 1. 如果地址是一个外网的绝对地址，直接使用即可（编译后地址还是外网）
// 2. 如果需要设置的是相对地址，则需要基于require把图片导入进来在使用，否则找不到地址
let image = new Image();
image.src = require('./static/image/img.png');
document.body.appendChild(image)
JS
将 es6 转为 es5 ，兼容其他浏览器
npm install babel-loader @babel/core @babel/preset-env --save-dev
babel-loader：用于语法转换, 它是依赖于 @babel/core @babel/preset-env 。npm install @babel/runtime @babel/polyfill// 安装到生产环境下
npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime --save-dev
@babel/polyfill 向下兼容，它必须与 @babel/runtime 和 @babel/plugin-transform-runtime 一起使用。- 语法检测
npm install eslint exlint-loader --save-dev
module.exports = {
module: {
// 设置规则和处理方案 默认执行顺序：从右到左，从下到上
rules: [
{
test: /\.js$/i,
use: [{
loader: 'babel-loader',
options: {
// 指定语法包，转换语法
presets: [
"@babel/preset-env" // es6 -> es5
],
// 基于插件处理es6和es7中的class特色语法
plugins: [
// 处理类的装饰器
[
"@babel/plugin-proposal-decorators",{
"legacy": true
}
],
// 类中设置属性
[
"@babel/plugin-proposal-class-properties",{
"loose": true
}
],
[
"@babel/plugin-transform-runtime"
]
]
}
},
// 'eslint-loader'
],
include: path.resolve(__dirname,'src'),
exclude: /node_modules/
}
]
}
}
内容总结
以上是互联网集市为您收集整理的webpack4.0 基础配置3(css)全部内容，希望文章能够帮你解决webpack4.0 基础配置3(css)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。