webpack使用总结

最新推荐文章于 2024-07-19 10:53:22 发布

yaoyongcsdn

最新推荐文章于 2024-07-19 10:53:22 发布

阅读量548

点赞数

分类专栏：前端框架学习文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_42759726/article/details/119932085

版权

本文详细介绍了webpack的基本概念、安装方法、打包流程，重点解析了webpack.config.js中的入口(entry)、输出(output)、loader、插件(plugin)和模式(mode)配置，以及webpack 5中的资源模块(asset module)类型，包括Resource、inline、source、URL和通用资源类型的应用。

摘要由CSDN通过智能技术生成

参考文档:https://webpack.docschina.org/concepts/

一.概念

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

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求。

二.安装

webpack 5 运行于 Node.js v10.13.0+ 的版本。安装之前请确保已安装最新版本的Nodejs.

1.全局安装

npm install webpack webpack-cli -g

2.基本安装

首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

三.打包

1.新建项目,目录结构、文件和内容

project

  webpack-demo
+ |- /dist
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

src/index.js

import $ from 'jquery';

$(function(){
    $('li:odd').css('backgroundColor','yellow')
    $('li:even').css('backgroundColor','green')
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>webpack学习</title>
  </head>
  <body>
    <script src="./src/index.js"></script>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>

最低0.47元/天解锁文章

yaoyongcsdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用总结

参考文档:https://webpack.docschina.org/concepts/一.概念本质上，webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍...
复制链接

扫一扫

专栏目录