扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >怎么从头开始设置webpack 5
  • 337

0
分享到

怎么从头开始设置webpack 5

2024-04-02 19:04:59 337人浏览 安东尼
摘要

本篇内容主要讲解“怎么从头开始设置webpack 5”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么从头开始设置WEBpack 5”吧!如果你是从 webpa

本篇内容主要讲解“怎么从头开始设置webpack 5”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么从头开始设置WEBpack 5”吧!

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

  • webpack-dev-server命令现在换成webpack-serve

  • file-loader、raw-loader和url-loader不是必需的，可以使用内置的Asset Modules

  • 节点 polyfill  不再可用，例如，如果遇到stream错误，则可以将stream-browserify包作为依赖项添加，并将{stream：'stream-browserify'}添加到webpack配置中的alias属性。

什么是 webpack?

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

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

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

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

安装

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

mkdir webpack-tutorial cd webpack-tutorial npm init -y  // 创建默认的 package.JSON

安装webpack和webpack-cli：

npm i -D webpack webpack-cli

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

console.log('Interesting!')

基本配置

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

Entry

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

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

const path = require('path')  module.exports = {   entry: {     main: path.resolve(__dirname, './src/index.js'),   }, }

Output

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

module.exports = {       output: {     path: path.resolve(__dirname, './dist'),     filename: '[name].bundle.js',   }, }

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

"scripts": {   "build": "webpack" }

现在可以运行它了:

npm run build

怎么从头开始设置webpack 5

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

插件

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

HTML 模板文件

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

安装一下：

npm i -D html-webpack-plugin

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

src/template.html

<!DOCTYPE html> <html lang="en">   <head>     <title><%= htmlWebpackPlugin.options.title %></title>   </head>    <body>     <div id="root"></div>   </body> </html>

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

const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')  module.exports = {       plugins: [     new HtmlWebpackPlugin({       title: 'webpack Boilerplate',       template: path.resolve(__dirname, './src/template.html'), // template file       filename: 'index.html', // output file     }),   ], }

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

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

// Create heading node const heading = document.createElement('h2') heading.textContent = 'Interesting!'  // Append heading node to the DOM const app = document.querySelector('#root') app.append(heading)

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

http-server

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

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

Clean

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

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

const path = require('path')  const HtmlWebpackPlugin = require('html-webpack-plugin') const {CleanWebpackPlugin} = require('clean-webpack-plugin')  module.exports = {       plugins: [          new CleanWebpackPlugin(),   ], }

Modules and Loaders

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

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

  • 将 JS 编译为浏览器可以理解的版本

  • 导入样式并将 SCSS 编译为 CSS

  • 导入图像和字体

  • (可选)设置React或Vue

Babel (JavaScript)

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

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

  • babel-loader-使用 Babel 和 webpack 传输文件。

  • @babel/core-将ES2015+ 转换为向后兼容的 JavaScript

  • @babel/preset-env-Babel 的智能默认设置

  • @babel/plugin-proposal-class-properties-自定义 Babel 配置的示例(直接在类上使用属性)

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

webpack.config.js

module.exports = {       module: {     rules: [       // JavaScript       {         test: /\.js$/,         exclude: /node_modules/,         use: ['babel-loader'],       },     ],   }, }

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

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

// 创建没有构造函数的类属性 class Game {   name = 'Violin Charades' } const myGame = new Game() // 创建 p 节点 const p = document.createElement('p') p.textContent = `I like ${myGame.name}.`  const heading = document.createElement('h2') heading.textContent = 'Interesting!'  const app = document.querySelector('#root') app.append(heading, p)

怎么从头开始设置webpack 5

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

{   "presets": ["@babel/preset-env"],   "plugins": ["@babel/plugin-proposal-class-properties"] }

Images

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

src/index.js

import example from './images/example.png'  

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

怎么从头开始设置webpack 5

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

webpack.config.js

module.exports = {      module: {     rules: [       // Images       {         test: /\.(?:ico|gif|png|jpg|jpeg)$/i,         type: 'asset/resource',       },     ],   }, }

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

字体和内联

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

src/index.js

import example from './images/example.svg'  

webpack.config.js

module.exports = {      module: {     rules: [       // Fonts and SVGs       {         test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,         type: 'asset/inline',       },     ],   }, }

Styles

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

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

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

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

  • sass-loader &mdash; 加载 SCSS 并编译为CSS

  • node-sass &mdash; Node Sass

  • postcss-loader &mdash; 使用 PostCSS 处理 CSS

  • css-loader &mdash; 解析 css import

  • style-loader &mdash;&mdash; 将CSS注入到DOM中

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

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

postcss.config.js

module.exports = {   plugins: {     'postcss-preset-env': {       browsers: 'last 2 versions',     },   }, }

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

src/styles/main.scss

$font-size: 1rem; $font-color: lch(53 105 40);  html {   font-size: $font-size;   color: $font-color; }

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

src/index.js

import './styles/main.scss'  

webpack.config.js

module.exports = {      module: {     rules: [       // CSS, PostCSS, and Sass       {         test: /\.(scss|css)$/,         use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],       },     ],   }, }

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

开发

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

  • 生产配置，用于最小化，优化和删除所有源映射

  • 开发配置，该配置在服务器中运行webpack，每次更改都会更新，并具有源映射

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

npm i -D webpack-dev-server

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

const webpack = require('webpack')  module.exports =  {      mode: 'development',   devServer: {     historyapiFallback: true,     contentBase: path.resolve(__dirname, './dist'),     open: true,     compress: true,     hot: true,     port: 8080,   },    plugins: [          // Only update what has changed on hot reload     new webpack.HotModuleReplacementPlugin(),   ], })

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

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

package.json

"scripts": {   "start": "webpack serve" }
npm start

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

到此，相信大家对“怎么从头开始设置webpack 5”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

--结束END--

本文标题: 怎么从头开始设置webpack 5

本文链接: https://lsjlt.com/news/84315.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么从头开始设置webpack 5
    本篇内容主要讲解“怎么从头开始设置webpack 5”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么从头开始设置webpack 5”吧!如果你是从 webpa...
    99+
    2024-04-02
  • excel页码怎么设置从4开始
    本文小编为大家详细介绍“excel页码怎么设置从4开始”，内容详细，步骤清晰，细节处理妥当，希望这篇“excel页码怎么设置从4开始”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。excel页码设置从4开始的方法：...
    99+
    2023-07-02
  • 从头开始设计数据库：DDL 101
    DDL 关键概念 表：包含数据的结构化集合。 字段：表中的数据列。 数据类型：定义字段中可以存储的数据类型。 约束：限制表中数据值的规则，例如唯一性、非空性和外键引用。 索引：加速数据检索的数据结构。 创建表 CREATE TABLE t...
    99+
    2024-02-19
    数据定义语言 (DDL) 是 SQL 的一个子集 用于创建 修改和删除数据库中的对象 例如表 索引和约束。掌握 DDL 的基础知识对于设计和管理高效且可靠的数据库至关重要。
  • win10日历从周日开始怎么设置
    本篇内容介绍了“win10日历从周日开始怎么设置”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！win10日历周日开始设置方法：点击日历面板左...
    99+
    2023-07-01
  • oracle怎么设置序列重新从1开始
    在Oracle中，可以通过以下步骤来设置序列重新从1开始：1. 首先，你需要找到要重置的序列的名称。你可以使用以下查询语句来获取序列...
    99+
    2023-09-15
    oracle
  • word页码怎么从任意页开始设置
    这篇文章主要介绍了word页码怎么从任意页开始设置的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇word页码怎么从任意页开始设置文章都会有所收获，下面我们一起来看看吧。首先打开需要让页码从任意一页开始的文档。 ...
    99+
    2023-07-02
  • Web 建设的基础：从头开始掌握 HTML
    ...
    99+
    2024-04-02
  • SQL id从1开始 / 设置id初始值
            TRUNCATE TABLE tablename 设置id初始值：       ALTER TABLE tableName AUTO_INCREMENT=10000   以上语句在mysql和sql server中皆...
    99+
    2016-07-15
    SQL id从1开始 / 设置id初始值
  • 从0开始设置django（基于CentO
    一 CentOS python3的安装 yum -y groupinstall "Development tools" yum -y install zlib-devel bzip2-devel openssl-devel ncurses...
    99+
    2023-01-30
    django CentO
  • word页码从第二页开始为1怎么设置
    这篇文章主要介绍“word页码从第二页开始为1怎么设置”，在日常操作中，相信很多人在word页码从第二页开始为1怎么设置问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”word页码从第二页开始为1怎么设置”的疑...
    99+
    2023-06-30
  • 从头开始：详细解析PyCharm的安装和配置
    从零开始：PyCharm的安装与配置详解 近年来，Python编程语言的应用越来越广泛，成为许多开发者和数据科学家的首选。而PyCharm作为一款Python集成开发环境（IDE），在Python开发过程中发挥着重要的作用。本文...
    99+
    2024-02-03
    pycharm 配置 安装
  • MySQL 自增 ID 默认从 1 开始，如何设置自增 ID 从 0 开始
        MySQL 是一种关系型数据库，它是世界上最流行的关系型数据库之一。在 MySQL 中，自增是一种非常有用的功能，它可以自动给主键赋值，并保证每个主键是唯一的。然而，许多人不知道的是，MySQL 默认情况下从 1 开始自增，这并不总...
    99+
    2023-10-22
    mysql 数据库
  • win10开始菜单下载箭头如何设置
    这篇文章主要介绍“win10开始菜单下载箭头如何设置”，在日常操作中，相信很多人在win10开始菜单下载箭头如何设置问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”win10开始菜单下载箭头如何设置”的疑惑有所...
    99+
    2023-07-01
  • 从零开始学习Node.js系列教程之设置HTTP头的方法示例
    本文实例讲述了Node.js设置HTTP头的方法。分享给大家供大家参考，具体如下： server.js //basic server的配置文件 var port = 3000; var server =...
    99+
    2022-06-04
    示例 从零开始 方法
  • win8开始菜单怎么设置
    今天小编给大家分享一下win8开始菜单怎么设置的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。设置方法：一、首先需要再次打开导...
    99+
    2023-06-28
  • word页码怎么从第三页开始设置为第一页
    这篇文章主要讲解了“word页码怎么从第三页开始设置为第一页”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“word页码怎么从第三页开始设置为第一页”吧！word页码从第三页开始设置为第一页的...
    99+
    2023-07-01
  • Word如何从任意页开始设置页码
    在Word中，可以通过以下步骤从任意页开始设置页码：1. 首先，打开你的Word文档。2. 定位到你想要从该页开始设置页码的页面。3...
    99+
    2023-10-20
    Word
  • Word如何设置页码从指定页开始
    这篇文章主要介绍“Word如何设置页码从指定页开始”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Word如何设置页码从指定页开始”文章能帮助大家解决问题。设置页码从指定页开始的方法：首先将光标移动到...
    99+
    2023-07-02
  • vue怎么设置开始进入页面
    本篇内容介绍了“vue怎么设置开始进入页面”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！vue项目默认进入的页面是HelloWorld.vu...
    99+
    2023-07-04
  • oracle怎么重置序列从0开始递增1
    这篇文章主要介绍“oracle怎么重置序列从0开始递增1”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“oracle怎么重置序列从0开始递增1”文章能帮助大家解决问题。oracle序列创建以后，如果想...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作