文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

Webpack教程：如何从头开始设置 webpack 5

2024-12-03 16:56

关注

本文已经过原作者 Tania Rascia 授权翻译。

webpack 对我来说曾经是一个怪物般存在一样，因为它有太多太多的配置项，相反，使用像create-react-app脚手架可以很轻松创建项目，所以有一段时间内，我会尽量避免使用 webpack，因为它看起来既复杂又望而却步 ??

如果你们不习惯从头开始设置 webpack 来使用Babel、TypeScript、Sass、React或Vue，或者不知道为什么要使用 webpack，那么这篇文章是你的最佳选择。就像所有的事情一样，一旦你深入学习，你会发现它并不是那么可怕，只有几个主要的概念需要学习掌握。

如果你是从 webpack 4 升级到 webpack 5，这里有一些注意事项:

什么是 webpack?

现在，大多数网站不再只是单单的由原生JS+纯HTML编写的，还涉及一些浏览器无法理解的语言，如果项目大，文件多，对应的体积就大。所以要压缩文件和翻译成所有浏览器都能理解的东西，这就是webpack的用武之地。

webpack 可以看做是模块打包器：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss，TypeScript等)，并将其打包为合适的格式以供浏览器使用。

对于开发，webpack 还提供了一个开发服务器，它可以在我们保存时动态地更新模块和样式。vue create和create-response-app本质上都依赖于 webpack。

webpac k可以做很多事情，本文只是帮助大家熟悉一些主要概念并进行一些手动的配置。

安装

首先，创建一个目录webpack-tutorial，相关命令如下：

  1. mkdir webpack-tutorial 
  2. cd webpack-tutorial 
  3. npm init -y  // 创建默认的 package.json 

安装webpack和webpack-cli：

  1. npm i -D webpack webpack-cli 

接着，创建目录 src，并在其里面创建 index.js，内容如下：

  1. console.log('Interesting!') 

基本配置

在项目的根目录中创建一个webpack.config.js。

Entry

entry是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。

entry 配置是必填的，若不填则将导致 Webpack 报错退出。这里，我们将src/index.js做为入口点。

  1. const path = require('path') 
  2.  
  3. module.exports = { 
  4.   entry: { 
  5.     main: path.resolve(__dirname, './src/index.js'), 
  6.   }, 
  7. } 

Output

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。这里指定输出的路径为 'dist'：

  1. module.exports = { 
  2.    
  3.  
  4.   output: { 
  5.     path: path.resolve(__dirname, './dist'), 
  6.     filename: '[name].bundle.js', 
  7.   }, 
  8. } 

现在，我们具有构建捆绑包所需的最低配置。在package.json中，我们可以创建一个运行webpack命令的构建脚本。

  1. "scripts": { 
  2.   "build": "webpack" 
  3. } 

现在可以运行它了:

  1. npm run build 

现在在 dist 目录会生成一个 main.bundle.js 文件

插件

webpack有一个插件接口，这使得它更加灵活。内部webpack代码和第三方扩展使用插件，有一些主要的方法几乎每个webpack项目都会用到。

HTML 模板文件

目前，我们有一个随机的bundle文件，但它对我们还不是很有用。如果需要使用main.bundle.js，就要借助 HTML页面来加载这个 JS 包作为脚本。我们希望HTML文件自动引入这个生成 js 文件，所以我们将使用html-webpack-plugin创建一个HTML模板。

安装一下：

  1. npm i -D html-webpack-plugin 

在src文件夹中创建一个template.html文件，这里，我们自定义一个title，内容如下：

src/template.html

  1.  
  2. "en"> 
  3.    
  4.     <%= htmlWebpackPlugin.options.title %> 
  5.    
  6.  
  7.    
  8.     "root">
 
  •    
  •  
    •

    创建配置的plugins属性，然后将插件，文件名添加到输出(index.html)，并链接到将基于该模板的模板文件。

    1. const path = require('path') 
    2. const HtmlWebpackPlugin = require('html-webpack-plugin') 
    3.  
    4. module.exports = { 
    5.    
    6.  
    7.   plugins: [ 
    8.     new HtmlWebpackPlugin({ 
    9.       title: 'webpack Boilerplate', 
    10.       template: path.resolve(__dirname, './src/template.html'), // template file 
    11.       filename: 'index.html', // output file 
    12.     }), 
    13.   ], 
    14. } 

    现在再次运行构建，会看到dist文件夹现在包含一个index.html，里面也自动引入了我们打包好的 js 文件。用浏览器打开 index.html，会在控制台看到 Interesting!。

    接着，在index.js中我们动态插入一些 dom 元素到页面中，内容如下：

    1. // Create heading node 
    2. const heading = document.createElement('h1') 
    3. heading.textContent = 'Interesting!' 
    4.  
    5. // Append heading node to the DOM 
    6. const app = document.querySelector('#root') 
    7. app.append(heading) 

    重新构建，在进入 dist 目录下面，用 http-server 运行 html 文件。

    1. http-server 

    可以在页面上看到，我们注入的 "Interesting!"，还会注意到捆绑文件已缩小。

    注意:在安装HtmlWebpackPlugin后，你会看到一个DeprecationWarning，因为插件在升级到webpack 5后还没有完全摆脱deprecation警告。

    Clean

    我们还需要设置clean-webpack-plugin,在每次构建后清除dist文件夹中的所有内容。这对于确保不遗留任何旧数据很重要。

    clean-webpack-plugin-删除/清理构建文件夹

    1. const path = require('path') 
    2.  
    3. const HtmlWebpackPlugin = require('html-webpack-plugin') 
    4. const {CleanWebpackPlugin} = require('clean-webpack-plugin') 
    5.  
    6. module.exports = { 
    7.    
    8.  
    9.   plugins: [ 
    10.      
    11.     new CleanWebpackPlugin(), 
    12.   ], 
    13. } 

    Modules and Loaders

    webpack 使用 loader 预处理一些加载的文件，如 js 文件、静态资源(如图像和CSS样式)和编译器(如TypeScript和Babel)。webpack 5也有一些内置的资产加载器。

    在我们的项目中，有一个HTML文件，该文件可以加载并引入一些 JS ，但实际上并没有执行任何操作。那么这个webpack配置要做的主要事情是什么?

    Babel (JavaScript)

    Babel是一个工具，可让使用最新的 JS 语法。

    建立一个规则来检查项目中(node_modules之外)的任何.js文件，并使用babel-loader进行转换。Babel 还有一些其他的依赖项：

    1. npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties 

    webpack.config.js

    1. module.exports = { 
    2.    
    3.  
    4.   module: { 
    5.     rules: [ 
    6.       // JavaScript 
    7.       { 
    8.         test: /\.js$/, 
    9.         exclude: /node_modules/, 
    10.         use: ['babel-loader'], 
    11.       }, 
    12.     ], 
    13.   }, 
    14. } 

    如果是 TypeScript 项目，使用的是typescript-loader而不是babel-loader。

    现在Babel已经设置好了，但是我们的Babel插件还没有。可以在index.js中添加一些新的语法来证明它还不能正常工作。

    1. // 创建没有构造函数的类属性 
    2. class Game { 
    3.   name = 'Violin Charades' 
    4. } 
    5. const myGame = new Game() 
    6. // 创建 p 节点 
    7. const p = document.createElement('p') 
    8. p.textContent = `I like ${myGame.name}.` 
    9.  
    10. const heading = document.createElement('h1') 
    11. heading.textContent = 'Interesting!' 
    12.  
    13. const app = document.querySelector('#root') 
    14. app.append(heading, p) 

    要解决这个问题，只需在项目的根目录中创建一个.babelrc文件。可以使用preset-env和plugin-proposal-class-properties添加更多默认值。

    1. { 
    2.   "presets": ["@babel/preset-env"], 
    3.   "plugins": ["@babel/plugin-proposal-class-properties"] 
    4. } 

    Images

    假设我们需要引用一张图片并直接导入到 JS 文件中，这样是无法正常工作的。为了演示，创建 src/ images 并向其中添加图像，然后尝试将其导入到index.js文件中。

    src/index.js

    1. import example from './images/example.png' 
    2.  
    3.  

    运行构建时，再次看到错误：

    webpack有一些内置的asset modules ，可用于静态资源。对于图像类型，我们将使用asset/resource,注意，这里是一个type，而不是loader。

    webpack.config.js

    1. module.exports = { 
    2.    
    3.   module: { 
    4.     rules: [ 
    5.       // Images 
    6.       { 
    7.         test: /\.(?:ico|gif|png|jpg|jpeg)$/i, 
    8.         type: 'asset/resource', 
    9.       }, 
    10.     ], 
    11.   }, 
    12. } 

    构建后，可以在dist文件夹查看。

    字体和内联

    webpack 还有一个asset module ，可以使用asset/inline内联某些数据，例如svgs和字体。

    src/index.js

    1. import example from './images/example.svg' 
    2.  
    3.  

    webpack.config.js

    1. module.exports = { 
    2.    
    3.   module: { 
    4.     rules: [ 
    5.       // Fonts and SVGs 
    6.       { 
    7.         test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, 
    8.         type: 'asset/inline', 
    9.       }, 
    10.     ], 
    11.   }, 
    12. } 

    Styles

    同样的需要使用 style loader才能在脚本中执行类似import 'file.css'的操作。

    现在很多人都在使用CSS-in-JS、styled-components和其他工具来将样式引入到他们的 JS 应用程序中。

    当网站只有一个 CSS 文件，仅能够加载一个CSS文件就足够了。但如果想使用PostCSS，为了能在任何浏览器中使用所有最新的CSS特性。或者想使用Sass, CSS预处理器，那就需要使用其它的 loader 处理。

    我想使用这三种方法——在Sass中编写，在PostCSS中处理，以及编译到CSS。这需要引入一些加载器和依赖项。

    1. npm i -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass 

    就像Babel一样，PostCSS 也需要一个配置文件 postcss.config.js，在根目录中创建它，并输入以下内容：

    postcss.config.js

    1. module.exports = { 
    2.   plugins: { 
    3.     'postcss-preset-env': { 
    4.       browsers: 'last 2 versions', 
    5.     }, 
    6.   }, 
    7. } 

    为了测试 Sass 和 PostCSS 是否正常工作，创建 src/styles/main.scss，并输入以下内容：

    src/styles/main.scss

    1. $font-size: 1rem; 
    2. $font-color: lch(53 105 40); 
    3.  
    4. html { 
    5.   font-size: $font-size; 
    6.   color: $font-color; 
    7. } 

    现在，将文件导入index.js并添加四个 loader 。它们从最后编译到第一个，因此列表中最后一个是sass-loader，因为需要编译，然后是PostCSS，然后是CSS，最后是style-loader，它将CSS注入到DOM 中。

    src/index.js

    1. import './styles/main.scss' 
    2.  
    3.  

    webpack.config.js

    1. module.exports = { 
    2.    
    3.   module: { 
    4.     rules: [ 
    5.       // CSS, PostCSS, and Sass 
    6.       { 
    7.         test: /\.(scss|css)$/, 
    8.         use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], 
    9.       }, 
    10.     ], 
    11.   }, 
    12. } 

    现在，重新构建时，项目中已经应用了Sass和PostCSS。

    开发

    每次进行更新时都要运行npm run build，站点越大，构建所需的时间就越长，这样就十分的烦琐。为此可以为 webpack 设置两种配置：

    开发模式下是在内存中运行所有内容，而不是构建一个dist文件，需要安装 webpack-dev-server

    1. npm i -D webpack-dev-server 

    出于演示目的，我们可以仅将开发配置添加到正在构建的当前webpack.config.js文件中并对其进行测试。但是，我们开发一般要创建两个配置文件：一个生产环境用的 mode: production，一个开发环境用的mode: development。

    1. const webpack = require('webpack') 
    2.  
    3. module.exports =  { 
    4.    
    5.   mode: 'development', 
    6.   devServer: { 
    7.     historyApiFallback: true, 
    8.     contentBase: path.resolve(__dirname, './dist'), 
    9.     open: true, 
    10.     compress: true, 
    11.     hot: true, 
    12.     port: 8080, 
    13.   }, 
    14.  
    15.   plugins: [ 
    16.      
    17.     // Only update what has changed on hot reload 
    18.     new webpack.HotModuleReplacementPlugin(), 
    19.   ], 
    20. }) 

    我们添加mode: development，并创建devServer属性，其中，默认端口将为8080，自动打开浏览器窗口，并使用hot-module-placement，这需要webpack.HotModuleReplacementPlugin插件。这样模块执行更新而无需完全重新加载页面-因此，如果你更新某些样式，则这些样式将发生变化，并且不用重新加载整个 JS ，大大加快了开发速度。

    现在，可以使用webpack serve命令来启动项目。

    package.json

    1. "scripts": { 
    2.   "start": "webpack serve" 
    3. } 
    1. npm start 

    运行此命令时，将在浏览器中自动弹出一个指向localhost：8080的链接。现在，您可以更新Sass和JavaScript，并观看其动态更新。

    总结

    我用 Babel，Sass，PostCSS，生产优化和开发服务器创建了可用于生产的webpack 5样板，其中包含本文的所有内容，但会涉及更多细节。从这里，可以轻松设置React，Vue，Typescript或其他任何您想要的东西。

    项目地址：webpack 5 boilerplate

    看看它，摆弄它，享受它!

    作者：Tania Rascia 译者：前端小智 来源：taniarascia

    原文：https://www.taniarascia.com/how-to-use-webpack/

    本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系公众号。

     

    来源：大迁世界内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    Webpack教程：如何从头开始设置 webpack 5

    后端开发webpack配置项2024-12-03

    怎么从头开始设置webpack 5

    后端开发2024-04-02

    了解如何从头开始设置 CI/CD 管道

    后端开发DevOpsCI/CD2024-11-30

    从头开始学习Go教程：如何使用数组

    从头开始学习Go教程：如何使用数组
    后端开发2023-11-04

    如何从头开始编写LoRA代码，这有一份教程

    后端开发AI训练2024-11-30

    从零开始学习Node.js系列教程之设置HTTP头的方法示例

    后端开发2022-06-04

    win10开始菜单下载箭头如何设置

    后端开发2023-07-01

    MySQL 自增 ID 默认从 1 开始，如何设置自增 ID 从 0 开始

    后端开发2023-10-22

    Word如何从任意页开始设置页码

    后端开发2023-10-20

    Word如何设置页码从指定页开始

    后端开发2023-07-02

    如何从头开始建设更智能、更安全的城市？

    后端开发物联网智慧城市2024-12-03

    如何在word中设置页码从第三页开始

    后端开发2023-09-16

    Golang安装教程：从零开始，教你如何正确安装golang开发环境！

    Golang安装教程：从零开始，教你如何正确安装golang开发环境！
    后端开发2024-01-19

    从头开始：如何在Windows上使用Java IDE进行异步编程？

    后端开发2023-07-22

    如何从零开始制作一个linuxiso镜像(图文教程)

    后端开发2022-05-19

    从零开始学Python教程：如何使用git来load你的程序？

    后端开发2023-06-26

    Windows如何设置开始菜单中显示程序数目

    后端开发2023-06-28

    GO语言教程：如何从零开始学习，成为一名优秀的开发者？

    后端开发2023-06-28

    win8如何开启远程桌面的图文设置教程

    后端开发2022-06-04

    从零开始的 Java 索引教程：如何使用 NPM 建立搜索引擎？

    后端开发2023-07-27
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯