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月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
51 0
|
2月前
|
存储 前端开发 JavaScript
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解(学习总结---从入门到深化)
50 0
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
3月前
|
前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(上)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
37 2
|
缓存 前端开发 JavaScript
好程序员教程分享webpack打包文件太大怎么办
好程序员教程分享webpack 打包文件太大怎么办,webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如HotModuleReplacementPlugin, NoErrorsPlugin复制代码这时候不管用什么优化方式,都没多大效果。
2015 0
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
28 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
19 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
3月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
19 0