Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)

简介: Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)

Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上):https://developer.aliyun.com/article/1420349

Webpack中使用Loader_处理Less文件



安装


温馨提示

需要安装less和less-loader两个包


npm instal --save-dev less@4.1.3 less-loader@11.0.0


修改配置


修改 webpack.config.js 配置文件

const path = require('path');
module.exports = {
  module: {
    rules: [
     {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
     }
   ]
 }
};


增加 less 文件引入到项目中

import "../src/css/style.less"

Webpack中使用Loader_处理Sass文件



我想 webpack 能打包scss\sass文件类型


安装


温馨提示

需要安装sass和sass-loader两个包

npm instal --save-dev sass@1.52.3 sass-loader@13.0.0


修改配置


修改 webpack.config.js 配置文件

module.exports = {
  module: {
    rules: [
     {
        test: /\.(scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
     }
   ]
 }
};


增加 scss 文件引入到项目中

import "../src/css/style.scss"

Webpack中使用插件_HTML插件



html-webpack-plugin 可以帮助我们将 src index.html 复制一份到项目的根目录中


安装

npm install html-webpack-plugin@5.5.0 --save-dev


配置插件

const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlPlugin({
      template: './src/index.html', //指定源文件的存放路径
      filename: './index.html'  // 指定生成的文件的存放路径
   })
 ]
};


温馨提示

会自动帮打包好的bundle.js 自动放进index.html 的底部


Webpack分离CSS文件



当前的打包,是将JavaScript和CSS同时打包进入了一个文件中,如果CSS很小其实是有优势的,但是如果CSS很大,那么这个文件就应该单独抽离出来我们可以使用 mini-css-extract-plugin 进行分离CSS


安装

npm install --save-dev mini-css-extract-plugin@2.6.1


修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
     {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
     },
     {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader']
     },
     {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
     }
   ]
 },
 plugins: [
    new MiniCssExtractPlugin({
      filename:"./css/index.css"
   })
 ]
};


温馨提示

mini-css-extract-plugin style-loader 冲突,需要删除 style-loader


Webpack压缩CSS文件



通过 mini-css-extract-plugin 分离出来的CSS文件并没有经历压缩,所以我们需要单独进行压缩,如何操作呢?


安装


通过 optimize-css-assets-webpack-plugin 进行压缩CSS文件

npm install --save-dev optimize-css-assets-webpack-plugin@6.0.1


修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
     {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader"]
     },
     {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader",'less-loader']
     },
     {
        test: /\.(scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader", 'sass-loader']
     }
   ]
 },
  plugins: [
    new MiniCssExtractPlugin({
      filename:"./css/index.css"
   }),
    new OptimizeCSSAssetsPlugin()
 ]
};


Webpack中配置Babel



走到此时很多小伙伴可能会发现问题,我们现在写的ES6代码,为啥能正常运行呢?


那是因为我们目前用的是 Chrome 浏览器,默认就支持,但是如果一些浏览器无法支持怎么办?


我需要使用 babel 进行编译


安装

npm install --save-dev @babel/core@7.18.5
npm install --save-dev @babel/preset-env@7.18.2
npm install --save-dev babel-loader@8.2.5


增加配置文件"babel.config.js"


在项目根目录下增加 babel.config.js 的配置文件

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
}


修改配置文件

module: {
    rules: [
     {
        test:/\.js$/,
        use:['babel-loader']
     },
   ]
}


温馨提示

通过观察打包之后的文件,在添加babel之前和之后的区别

目录
相关文章
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
250 91
|
19天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
31 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
13天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
40 1
|
13天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
30 2
|
13天前
|
前端开发 JavaScript
Webpack 常用 Loader 和 Plugin
【10月更文挑战第12天】Webpack 是一个强大的模块打包工具,能够将各种资源模块进行打包和处理。Loader 用于转换模块的源代码,如 `babel-loader` 将 ES6+ 代码转换为 ES5,`css-loader` 处理 CSS 文件等。Plugin 扩展 Webpack 功能,如 `HtmlWebpackPlugin` 自动生成 HTML 文件,`UglifyJsPlugin` 压缩 JavaScript 代码。通过合理配置和使用 Loader 和 Plugin,可以构建高效、优化的项目。
16 2
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
62 28
|
13天前
|
JSON 前端开发 JavaScript
webpack如何支持多种类型的文件和转换需求
【10月更文挑战第13天】webpack如何支持多种类型的文件和转换需求
|
2月前
|
设计模式 前端开发 JavaScript
webpack实战之手写一个loader和plugin
该文章详细讲解了如何从零开始编写一个自定义的Webpack Loader和Plugin,包括它们的工作原理、开发步骤以及如何将自定义的Loader和Plugin集成到Webpack配置中。
webpack实战之手写一个loader和plugin
|
2月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
46 15
|
2月前
|
前端开发