webpack 复制-快速入门Webpack的简单使用

bendan520 2023年8月21日 webpack 0

前言

大家好，我是小浪。这次给大家带来的是我学习如何使用webpack的总结。希望可以帮助到有需要的同学。中学的事情很多，所以好久没有发关于雄鹿的文章了。马上就要放假了，继续学习吧，看看林三鑫大鳄的B站视频。三鑫鳄鱼写自己的文章，然后分享给其他人。这是一种快速学习的方法。没错，分享的时候你一定会印象深刻

Webpack简介：

Webpack是主流的前端工程解决方案之一

主要功能：提供友好的后端模块化开发支持，以及代码压缩和混淆、处理浏览器端JavaScript兼容性、性能优化等强大功能。

好处：让程序员专注于具体功能的实现，提高了后端开发的效率以及项目的可维护性。注：目前Vue、React等后端项目基本都是基于webpack进行工程开发

早期计划安装

项目中安装webpack + webpack-cli，使用-D相当于--save-dev

-D 写入package.json中的devDependency来添加，也就是说我们只在开发阶段使用

-S 相当于--save写入依赖对象，表示开发环境和生产都使用

如果项目没有package.json，可以使用npm init -y快速配置

npm install [email protected] [email protected] -D 
复制代码

 "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.9.0"
 }
复制代码

配置启动命令

在package.json中配置脚本

"scripts": {
    "dev": "webpack",
},
复制代码

在命令行我们使用 npm run dev 来启动 webpack 命令

创建 webpack.config.js 文件的基本用途

在项目根目录下，创建一个名为webpack.config.js的webpack配置文件。 webpack在真正开始打包构建之前，会先读取这个配置文件webpack 复制，从而根据给定的配置来打包项目。

设置模式

module.exports = {
  mode: 'development',
}
复制代码

mode 有两个可选值，分别是：

发展

生产

设置入口和出口

webpack 4.x 和 5.x 中的默认约定：

我们可以在webpack.config.js中进行自定义

条目：打包条目

输出：打包导出

我们可以像下面这样设置

module.exports = {
  entry: './src/index.js', //打包入口文件路径
  output: './dist/mian.js', //输出文件路径
}
复制代码

还是这样写比较好，使用path模块来拼接路径

const path = require('path')
module.exports = {
  mode: 'development',
  entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件路径
    filename: 'js/bundle.js', //把生成的bundle.js放在dist/js/bundle.js下面
  },
}
复制代码

webpack-dev-server 使用简单

当源码改变时，webpack会手动打包构建项目，这样就不用每次都去npm run dev

webpack-dev-server 提供热更新的开发服务器

安装

npm install [email protected] -D
复制代码

安装完成后可以通过webpack server启动

配置

为了方便webpack-dev-server的启动，我们在package.json的脚本中添加了一个新命令

"scripts": {
    "serve": "webpack serve",
},
复制代码

在webpack.config.js中配置端口，devServer有很多可配置的选项，我这里配置一个端口

module.exports = {
  devServer: {
    port: 8080,
  },
}
复制代码

devServer.compress，启用gzip压缩。

devServer.contentBase，告诉服务器从哪里提供内容。仅当您想提供静态文件时才需要。

devServer.host，指定主机。使用 0.0.0.0 使其可以在 LAN 中访问。

devServer.hot，启用webpack的热模块替换功能（Hot Module Replacement）。

devServer.hotOnly，构建失败时是否允许回退到使用刷新页面。

devServer.inline，模式切换。默认为内联模式，使用 false 切换到 iframe 模式。

devServer.open，启动webpack-dev-server后是否使用浏览器打开主页。

devServer.overlay，是否允许全屏覆盖显示编译错误。默认不允许

devServer.port，监听端口号。默认值为 8080。

devServer.proxy，代理，比较适合单独的前端开发服务器API。

devServer.publicPath，设置打包文件在显存中的输出目录。与output.publicPath不同。

修改后使用npm runserve打包项目

打包完成后，启动实时打包的http服务器，提示我们访问：8080/，访问后可以查看我们页面的效果

打包文件

打包生成的文件存储在显存中。由于显存更快，实时打包的性能也得到提升，所以上面设置的输出路径是针对未安装webpack-dev-server的。

如何访问我们打包好的bundle.js，因为webpack-dev-server开启了一个服务器，/是项目的根目录，我们可以直接在地址栏访问bundle.js

插件插件

通过安装和配置第三方插件，可以对webpack进行扩展，使其更加强大

html-webpack-插件

我们会时不时地使用这个插件。在html中插入常见的css、js文件，可以减少请求次数，达到优化的效果，从而通过此插件自定义index.html页面的内容。

HTML插件自动将打包好的bundle.js文件注入到生成的index.html页面中

安装

npm install [email protected] -D
复制代码

配置

在 webpack.config.js 中配置插件

var HtmlWebpackPlugin = require('html-webpack-plugin') //1.先导入
const path = require('path')
module.exports = {
  //...
  //在插件中使用 HtmlWebpackPlugin
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), //原文件存放路径
      filename: path.join(__dirname, './dist/index.html'), //输出文件路径
    }),
  ],
}
复制代码

HtmlWebpackPlugin有很多可选参数，我就说下面三个常用的参数

title：生成的html文档的标题。配置此项，不会替换指定模板文件中title元素的内容

template：本地模板文件位置，支持加载器（如handlebars、ejs、undersore、html等）

filename：输出文件的文件名，默认为index.html，如果不配置则为文件名；此外，您还可以指定输出文件的目录位置（例如'./dist/index.html'）

使用

运行命令 npm run dev 可以看到打包完成

如果使用npm runserve的话，就不会出现这两个了，但是它们都在显存中，我们可以使用地址栏查看

干净的 webpack 插件

手动清除dist目录中的旧文件

安装

npm install [email protected] -D
复制代码

配置

在 webpack.config.js 中配置插件

const { ClenWebpackPlugin } = require('clean-webpack-plugin') //引入
module.exports = {
  //...
  plugins: [
    new ClenWebpackPlugin(), //挂载的创建插件实例
  ],
}
复制代码

装载机装载机

非.js后缀的模块webpack默认无法处理，只能理解JavaScript和JSON文件，需要调用loader才能正常打包

loader 加载器的作用：将 JavaScript 模块导出为函数。例如：

加载器调用流程

包CSS安装

npm i [email protected] [email protected] -D
复制代码

配置

其中test表示匹配的文件类型（常规）webpack 复制，use表示调用对应的loader注意：

在webpack.config.js模块中配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}
复制代码

无包安装

npm i [email protected] [email protected] -D
复制代码

配置

在webpack.config.js模块中配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.less$/,
        use: ['style-loader', 'css-loader','less-loader],
      },
    ],
  },
}
复制代码

其他css打包过程也是如此安装指定的loader

包文件

loader不仅可以打包css，我们还可以使用file-loader url-loader来处理url引用的图片

安装

npm i [email protected] [email protected] -D 
复制代码

配置

在webpack.config.js模块中配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.jpg|png|gif$/,
        use: {
            loader: 'url-loader',
           	options: {
                limit: 77777,
                outputPath: 'image',
            }
        }
      },
    ],
  },
}
复制代码

options是loader的参数项：

limit用于指定图片的大小，单位是字节（byte）只有图片≤limit大小才会转为base64格式图片

outputPath：是指定存储文件夹dist/image统一生成图像文件放入图像目录

Babel-loader 使用简单

使用babel-loader对js中的中间句型进行打包处理

安装

npm i [email protected] @babel/[email protected] @babel/[email protected] -D
复制代码

配置

在webpack.config.js模块中配置

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
    ],
  },
}
复制代码

注意：记得使用exclude排除/node_modules/下的模块

在项目根目录下创建babel.config.js文件进行配置

这是一个针对新手的零基础Webpack教程。

如果你是第一次接触Webpack，你可能会像三年前的我一样感到困惑和不解。

第一次接触Webpack是在2016年底，当时公司项目使用的重构工具并不是Webpack，技术社区已经开始流行使用Webpack构建后端项目。当时还没有完整的Webpack相关教程，而且当时的官方文档也不太好理解。于是我自己找了一些文章，尝试学习一下。不过webpack入门级教程，当时我并没有学会。因为Webpack是基于Node.js的，当时我并不了解Node.js，所以我开始学习Node.js...

当时我对整个Webpack感到困扰，经过长时间的开发，我逐渐对Webpack有了一些了解。但还是不知道如何使用Webpack进行项目开发。从Webpack1.0到Webpack4.0，一旦版本更新，我所学的知识就会被淘汰。因为版本更新，技术社区的一些文章也被淘汰了，但是你自己一般都不知道。

Webpack 凌乱的体系和学习成本较高的官方文档，让我们这样的初学者学习起来非常困难（其实和我写 Babel 教程的动机类似）。

三年过去了，我对Webpack越来越熟悉。中间也走了很多弯路。例如，虽然不需要深入学习 Node.js 来掌握 Webpack 的常规配置，但只需要了解几个 Node 模块功能即可。

现在已经是后端开发的第五个年头了，我发现Webpack官方文档的学习成本还是比较高的。所以我写了这个教程，希望对JavaScript开发者有所帮助。

本教程主要使用的Webpack版本是v4.46.0，适用于整个4.x版本。同时会简单介绍一些4.0.0版本之前流行的loader和插件，方便阅读社区文章。对于v5.0版本的Webpack，将单独编写教程。当然，在学习本教程时，建议大家使用教程中的版本。

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

2022 年 1 月注意：

《Webpack+Babel介绍及详细示例》将由电子工业出版社出版。这是一本为零基础后端开发人员讲解如何使用 Webpack 和 Babel 的书。

本书由两部分组成，第一部分介绍Webpack，第二部分介绍Babel。 Webpack部分讲解了Webpack的安装、资源进出、预处理器和插件配置、开发环境和生产环境配置、性能优化和建立原理等。Babel部分讲解了Babel的基础知识、Babel配置文件、预设的选择以及插件，如何使用babel-polyfillwebpack入门级教程，以及@babel/preset-env和@babel/plugin-transform-runtime这两个核心配置项，这部分会讲解Babel的原理以及Babel插件的开发。最后附表介绍了Module Federation和微后端，以及Babel 8预览等。

本书主要使用的Webpack版本是v5.21.2，但适用于v5.0.0以后的版本； Babel主要使用的版本是v7.13.10，但适用于v7.0.0之后的版本。

本书内容是网站教程内容的升级，同时也减少了原理的讲解。对原理感兴趣的读者可以购买本书。

另外，我们已与出版社沟通，本网站发布的内容不会被删除，您可以继续阅读已有的教程。

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

2021年5月注：本教程最初是针对Webpack4版本编写的，因为Webpack5正式版已经发布一段时间了，现在决定暂时不再更新本Webpack4教程的内容，并且关于Webpack5的内容稍后会写，这是一个完整的简介。

另外推荐阮一峰的ES6教程。 Webpack3的实体书可以看吴浩林的书，Webpack4的书可以看鞠宇豪的书。

Webpack入口与退出Webpack预处理器加载器Webpack插件pluginWebpack开发环境配置Webpack生产环境配置

webpack 复制-快速入门Webpack的简单使用

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复