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

我会带着你远行 2024-02-05 13:11 16阅读 0赞

### ![43e78e7124de4cdebe2438d33b22f8de.gif][] ###

**文章目录**

Webpack简介

搭建Webpack环境

Webpack增加配置文件

Webpack中使用Loader

Webpack中使用Loader\_处理Less文件

Webpack中使用Loader\_处理Sass文件

Webpack中使用插件\_HTML插件

Webpack分离CSS文件

Webpack压缩CSS文件

Webpack中配置Babel

--------------------

### Webpack简介 ###

![408d18a1c2e8430eb880418569388cb4.png][]

我们思考一个问题：当前端项目越来越大的时候，我们还能按照以往的思维方式继续开发么  
问题症结所在：文件管理、ES6代码的转换、项目的打包...  
解决方案：前端工程化(Webpack)

> **前端工程化**  
> 在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

例如：  
砌一堵墙：怎么简单怎么来，只要材料准备齐全，一个人直接干就行

一栋楼：需要很多大型机器，也需要更多的人，重要的必须要规范化干活，避免发生危险

![03645e4b8ad341aa8b1d15e48779309f.png][]

本质上，**webpack** 是一个用于现代 JavaScript 应用程序的 **静态模块打包工具**。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容

### 搭建Webpack环境 ###

![fb06ea4d93234d51963b3532ef8fb3f8.png][]

安装全局 **webpack**

npm install --save webpack@5.73.0
    npm install --save webpack-cli@4.10.0

> **温馨提示**  
> 由于 webpack 版本更新迭代较快，为了避免版本带来的错误，在接下来的包安装中，都需要指定具体版本信息，如上述版本添加方式，请各位同学保持与老师一致的版本

创建本地项目文件夹

mkdir webpack_demo
    cd webpack_demo

初始化项目

npm init

安装 **webpack** 到本地

npm install --save-dev webpack@5.73.0
    npm install --save-dev webpack-cli@4.10.0

使用 **webpack**  
创建项目结构 src 、 public

// src/show.js
    export function show(content) {
     window.document.getElementById('root').innerText = 'Hello,' + content;
    }

// src/index.js
    import { show } from './show.js'
    show('iwen');

执行 **webpack**

> **温馨提示**  
> webpack会自动寻找src目录，然后寻找index.js入口文件，然后进行打包，最终生成一个dist目录为打包后内容。

在 **public** 下创建 **index.html** ，引入自动生成的 **main.js** 文件

<div id="root"></div>
    <script src="../dist/main.js"></script>

### Webpack增加配置文件 ###

![c0ffe92850214563850b22595c48c228.png][]

**webpack** 可以增加配置文件，有了配置文件之后，可以更多的操作他

**入口配置**

在项目的根目录下创建 **webpack.config.js** 文件并输入以下代码

module.exports = {
     // JavaScript 执行入口文件
     entry: './src/index.js',
    };

**出口配置**

在 **webpack.config.js** 文件增加出口配置代码

const path = require('path');
    module.exports = {
     // JavaScript 执行入口文件
     entry: './src/index.js',
     output: {
      // 把所有依赖的模块合并输出到一个 bundle.js 文件
      filename: 'bundle.js',
      // 输出文件都放到 dist 目录下
      path: path.resolve(__dirname, './dist'),
    }
    };

然后我们在执行 **webpack**命令，此时就会默认执行 **webpack.config.js** 他会按照配置文件进行运行

### Webpack中使用Loader ###

![7309be258047419c825349570dedccee.png][]

Webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 能让 webpack 能够去处理其他类型的文件（比如css类型文件，图片类型等），并将它们转换为有效模块，以供使用

Webpack 把一切文件看作模块，CSS 文件也不例外，所以想打包CSS需要安装 css-loader

**安装 css-loader**

npm install --save-dev css-loader@6.7.1

**修改配置**

修改 **webpack.config.js** 配置文件

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

**增加CSS文件**

在 **index.js** 文件中引入CSS文件

import "../src/css/index.css"

此时运行会发现，css样式让然是无法加载的，因为 **css-loader** 只是能识别css文件  
要显示css样式还需要引入 **style-loader** 才可以

安装 **style-loader**

npm install --save-dev style-loader@3.3.1

**修改配置**

修改 **webpack.config.js** 配置文件

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

> **温馨提示**  
> **style-loader** 和 **css-loader** 是存在先后顺序的，必须先写 **style-loader** 在写 **css-loader**

### Webpack中使用Loader\_处理Less文件 ###

![670194cd646b4263ba6d8c3c7a8f547b.png][]

**安装**

> **温馨提示**  
> 需要安装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文件 ###

![1d33f1e648ef40ffa69a96d3f7301fef.png][]

我想 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插件 ###

![94610c5381d642d1b66f26ebb3c062ba.png][]

**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文件 ###

![1e890c3fdf8741d19240c183332d4465.png][]

当前的打包，是将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文件 ###

![588576c728964283a47b52f9ee1c471e.png][]

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

**安装**

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

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

**修改配置文件**

###  ###

### Webpack中配置Babel ###

![469074076b6a47008dd4355e70366653.png][]

走到此时很多小伙伴可能会发现问题，我们现在写的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之前和之后的区别

[43e78e7124de4cdebe2438d33b22f8de.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/93e88ed3225540c1919a7f4136bf665c.png
[408d18a1c2e8430eb880418569388cb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/e4cc7d95e97442acbce9883d75358711.png
[03645e4b8ad341aa8b1d15e48779309f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/f799c5ed5e044e51a8e0b7351091090e.png
[fb06ea4d93234d51963b3532ef8fb3f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/de9f1939736e42b5a5f2f76c61ba09e6.png
[c0ffe92850214563850b22595c48c228.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/aaea768c1e284532ae2cb78ad52ee007.png
[7309be258047419c825349570dedccee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/4ff028a8b2484bf1bf5b04d0d25d9dc7.png
[670194cd646b4263ba6d8c3c7a8f547b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/dd6f5cbef4e043c38ddd13d809a0a8be.png
[1d33f1e648ef40ffa69a96d3f7301fef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/1c37b6859be24cb9ab73f422ab15e972.png
[94610c5381d642d1b66f26ebb3c062ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/0dbb8f662ee04381a62dd286bce46750.png
[1e890c3fdf8741d19240c183332d4465.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/0377b1d07e004de1875a86e3841ece4d.png
[588576c728964283a47b52f9ee1c471e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/9b2ebde92bcd41bd95e5832296e7c2b2.png
[469074076b6a47008dd4355e70366653.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/36981f116d78416c845e4c5b2bbf6583.png