webpack使用

不穿铠甲的穿山甲2024-10-01 12:17

一、简介

概述

本次使用webpack4进行构建打包

二、webpack

安装webpack、webpack-cli

复制代码 
npm install webpack@4.2.0 webpack-cli@4.2.0 -D

三、loader

加载器概述

  • raw-loader：加载文件原始内容（utf-8）

  • file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件

  • url-loader:和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中

  • source-map-loader:加载额外的Source Map文件，以方便断点调试

  • svg-inline-loader：将压缩后的 SVG 内容注入代码中

  • image-loader：加载并且压缩图片文件

  • handlebars-loader: 将 Handlebars 模版编译成函数并返回

  • babel-loader：把ES6转化成ES5

    let----降级---->plugin

    箭头函数----降级--->plugin

  • ts-loader: 将 TypeScript 转换成 JavaScript

  • awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader

  • css-loader：加载css，支持模块化、压缩、文件导入等特性，帮我们分析出各个css文件之间的关系，把各个css文件合并成一段css；

  • style-loader：把css代码注入到js中，通过DOM操作去加载css

  • eslint-loader：通过ESLint检查JS代码

  • tslint-loader：通过 TSLint检查 TypeScript 代码

  • postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀

  • vue-loader：加载 Vue.js 单文件组件，它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

  • cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

1.安装sass加载器和模块

其实之所以用到node-sass、是因为sass-loader的缘故。sass-loader 是将sass文件编译成css，而sass-loader又依赖于node-sass，所以需要安装node-sass

复制代码 
npm install node-sass sass-loader -D
2.安装css加载器和安装style加载器

大概流程是，css loader将css包裹成js, 传给style loader 然后style loader再将它处理成一个立即执行函数封装到bundle中. 这个立即执行函数会生成一个style标签嵌入到HTML页面中

  • css-loader：加载css，支持模块化、压缩、文件导入等特性

  • style-loader：把css代码注入到js中，通过DOM操作去加载css

复制代码 
npm install css-loader  style-loader -D
复制代码 
npm install style-loader -D
3.安装ts加载器

将 TypeScript 转换成 JavaScript

复制代码 
npm install ts-loader -D
4.安装vue加载器

它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

复制代码 
npm install vue-loader@15.10.1 -D
5.安装babel加载器

能够把es6高级内容变为es5，es6/es7/es8等等高级标准有很多(let、箭头函数、对象解构赋值、...展开运算符、反勾号字符串等等)，每个标准都需要一个独立的plugin进行降级处理，如果使用许多高级标准内容，那么势必要为此安装许多plugin，这样工作比较繁琐，系统已经考虑到这点了，其通过preset把许多常用的plugin给做了集合，因此一般性的使用只需要安装preset即可搞定(如果项目应用到了一个生僻的高级标准内容，preset处理不来，就还需要再安装对应的plugin处理)

复制代码 
npm i babel-loader @babel/core @babel/preset-env -D
复制代码 
{
    test: /.js$/,
        exclude: /node_modules/,  // 排除目录
        use: [
                {
                    loader:'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
        ]  // es6转es5
} 
​

说明： @babel/preset-env用来指定按什么样的预设来进行降级处理

  1. 打包测试 打包之后，去打包后的文件中检查是否已经把const和箭头函数这种es6的代码转成了es5的代码。
6.PostCSS

  • PostCSS是一个通过JavaScript来转成样式的工具

  • 这个工具可以帮助我们进行一些css的转化和适配，比如自动添加浏览前缀，css样式的重置

PostCSS内部也是通过各种插件来实现转化的，所以需要安装各种插件来使用

复制代码 
npm install postcss-loader -D
npm install autoprefixer -D   //需要安装插件，添加浏览器前缀的
复制代码 
module: {
    rules: [
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader', {
                loader: 'postcss-loader',
                options: {
                    //可以提出一个单独的文件
                    postcssOptions: {
                        plugins: [
                            require('autoprefixer')
                        ]
                    }
                }
            }]
        }
    ]
}

当使用postcss-loader的时候，会先查找有不有自己options选项，如果没有就去查找postcss.config.js这个配置文件

postcss.config.js

复制代码 
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

webpack.config.js

复制代码 
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}

postcss-preset-env

一个比较强大的postcss插件

它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境 添加所需的polyfill；

也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）

安装：

复制代码 
npm install postcss-preset-env -D

使用:

跟autoprefixer使用是一样的，可以直接用postcss-preset-env替换autoprefixer

效果也是一样的

7. file-loader

file-loader的作用就是帮助我们处理import / require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

在使用图片有两种形式，一种是背景图片，另外一种是img标签

复制代码 
//简单创建一个img标签

import image from '../imgs/mode.png'

const el = document.createElement('img')

el.src = image

document.body.appendChild(el)

注意：当使用img标签的时候，我们把图片看成是一个模块，不要直接写成是一个字符串

安装

复制代码 
npm install file-loader -D

使用

复制代码 
//webpack.config.js

module: {
    rules: [
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                {
                    loader: 'file-loader'
                }
            ]
        }
    ]
}

上面的配置，可以直接展示出图片来了，也就说明加载成功了。

但是还是存在一种不是很友好的现象

打包过后的文件，就直接存在build文件夹中，如果是一张图片还好，如果有很多张图片，就会造成打包文件夹的结构混乱。图片被打包的文件名是32位hash值，我们不能分辨哪张是对应的哪张图片。所以需要进行处理。

所以需要对file-loader进行options配置

复制代码 
常见的配置：
[ext] 处理文件的扩展名
[name] 处理文件的名字
[hash：] 截取hash的长度，默认的32个字符太长了
[path] 文件相对于webpack配置文件的路径
复制代码 
//重新对file-loader进行配置
module: {
    rules: [
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                {
                    loader: 'file-loader'，
                    options: {
                        //在打包的文件夹中创建一个images文件夹，用来保存图片的
                        outputPath: 'images',
                        //给图片取名字
                        name: "[name]_[hash:8].[ext]"
                       }
                }
            ]
        }
    ]
}

效果图：

8.url-loader

url-loader跟file-loader的工作原理是一样的

url-loader的区别： 就是对图片有限制，对图片较小的进行base64编码

所以会发现，打包过后的文件，就一个build.js，而且里面都还是base64

这也不是我们想要的，只对限制一下的图片，进行base64的转换。

为什么呢？

复制代码 
小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程
而大的图片也进行转换，反而会影响页面的请求速度

小于100kb的图片，进行转化

复制代码 
{
    test: /\.(jpe?g|png|gif|svg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    //在打包的文件夹中创建一个images文件夹，用来保存图片的
                    outputPath: 'images',
                    //给图片取名字
                    name: "[name]_[hash:8].[ext]",
                    //配置limit
                    limit: 100 * 1024
                }
            }
        ]
}
9.加载数据（CSV/TSV/XML）

除了js，json，images, 可以加载的有用数据还有CSV/TSV/XML，要导入CSV, TSV和XML，可以

使用csv-loader和xml-loader

安装插件：

复制代码 
npm i csv-loader xml-loader -D
复制代码 
module.exports = {
  ...
  module: {
    rules: [
     {
        test: /\.(csv|tsv)$/,
        use: 'csv-loader'
      },
 
      {
        test: /\.xml$/,
        use: 'xml-loader'
      }
    ]
  }
}

四、插件(Plugin)

1.webpack-dev-server

项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件,现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果

复制代码 
npm i webpack-dev-server  -D

在webpack.config.js中做如下配置

复制代码 
module.exports = {
    // 其他省略....
  
    // 配置 webpack-dev-server的选项
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    }
}

在package.json中补充一个script

复制代码 
"scripts": {
+    "dev": "webpack-dev-server",  
   // 它默认会找webpack.config.js文件
   
   "build": "webpack-dev-server --config  webpack.config.js" 
    // 指定使用webpack.config.js配置文件文件
},

  1. 启动命令 现在通过 npm run dev就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。

  2. 测试

    • 修改.js代码，

    • 修改.css代码，检查是否会重启

2.HtmlWebpackPlugin
复制代码 
npm i html-webpack-plugin -D
复制代码 
const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={
 
    plugins:[
        new HtmlWebpackPlugin({//设置模板文件
              template:'./src/index.html',//使用打包后的模板文件
              filename:'index.html'//打包后文件的名字
        }) ,
    ]  
}

上述的这个如果需要在index中假如一些自动以的内容是根据development与production不同，而添加不同的内容。在这里html-webpack-plugin插件已经帮助我们做好了这部分。在你需要打包是自动需要假如的内容 使用

复制代码 
  <%= htmlWebpackPlugin.options.urlScript %>

要说明的是urlScript 这个是我们自己定义的，你可以叫任何的名字,在传入的时候使用这个变量放入插件的内置中

复制代码 
const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={
 
    plugins:[
        new HtmlWebpackPlugin({//设置模板文件
              template:'./src/index.html',//使用打包后的模板文件
              filename:'index.html'//打包后文件的名字
              urlScript:'<script src="./js/zepto.min.js"></script> '//---<<---就这里
        }) ,
    ]  
}

未经过html转换的文件

复制代码 
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title></title>
<head>
<body> 
</body>
  <%= htmlWebpackPlugin.options.urlScript %>
</html>

经过 html-webpack-plugin 的转换之后就会变成

复制代码 
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title></title>
<head>
<body> 
</body>
  <script src="./js/zepto.min.js"></script>  -->>之前的标间就被替换成为了 我们之前的插件设置的内容了，这个很有用
</html>
3.VueLoaderPlugin

作用是 对本次webpack编译的所有rules做操作，添加pitch-loader和vue-loader，进行一个顺序的重新排放，

最终rule中的顺序是这样的: [ pitch-loader, ... ... , vue-loader] (pitcher在在开始，vue-loader在最后，这一切是通过把...clonedrule放到中间来实现的）

（ * pitchloader的resourceQuery函数表明了，这个loader只会对request中带有vue字段query的request使用pitchloader）

4. process
复制代码 
 npm i --save-dev process
5.抽离css为单独的文件

安装抽离css为单独文件的插件：该插件基于webpack5构成，主要是把style标签引入css转化为link

引入css

安装插件：

复制代码 
npm i mini-css-extract-plugin -D

配置：

复制代码 
// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 module.exports = {
  ...
  plugins: [
    new MiniCssExtractPlugin({
        // 指定抽离的之后形成的文件名
      filename: 'styles/[contenthash].css'
    })
  ],
  module: {
    rules: [
      // 处理后缀名为.css或者是.less的文件
  {
        test: /\.(css|less)$/,
        // stuyle-loader作用是在 head 中创建 style 标签
        // MiniCssExtractPlugin.loader是将css抽离为独立的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }
}

五、CSS优化(压缩)

安装插件：

复制代码 
npm i css-minimizer-webpack-plugin -D

配置：

复制代码 
/ 引入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 
module.exports = {
  ...
  // 优化配置项
  optimization: {
    minimizer: [
      // 使用插件优化 css 代码
      new CssMinimizerPlugin()
    ],
  },
  // 模式，因为压缩css代码只在生产模式下生效
  mode: 'production'
}

六、字体资源

通过 CSS 引入字体资源

复制代码 
@font-face {
  font-family: 'PujiSansExpandedHeavy';
  src: url('../fonts/PujiSans-ExpandedHeavy.eot'); /* IE9 Compat Modes */
  src: url('../fonts/PujiSans-ExpandedHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PujiSans-ExpandedHeavy.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
 }

配置：

复制代码 
module.exports = {
  ...
  module: {
    rules: [
     // 配置字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        // asset/resource可以帮助我们载入任何类型
        type: 'asset/resource'
      }
    ]
  }
}

Node API 方式

webpack.config.js

复制代码 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

在使用 Node API 时，还可以通过配置中的 plugins 属性传入插件。

some-node-script.js

复制代码 
const webpack = require('webpack'); // 访问 webpack 运行时(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function (err, stats) {
  // ...
});

webpack打包成的dist启动运行

安装express-generator生成器

复制代码 
npm install express-generator -g

创建一个express项目 执行express expressDemo（expressDemo是项目名）

expressDemo项目目录如下图：

进入expressDemo目录，安装项目依赖 执行npm install

把dist目录下的所有文件复制到express项目的public文件夹下

运行npm start启动expressDemo项目，打开浏览器，输入http://localhost:3000即可访问。

相关推荐
崔庆才丨静觅13 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606114 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了14 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅14 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅14 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅15 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment15 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅15 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊15 小时前
jwt介绍
前端
爱敲代码的小鱼15 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03UV安装并设置国内源04openclaw配置教程（linux+局域网ollama）05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07OpenClaw Chrome扩展使用教程 - 浏览器中继控制08Claude Code Skills 实用使用手册09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10Vue-skills的中文文档