webpack基本使用方法

最新推荐文章于 2024-12-06 16:33:38 发布

收官无敌-曹官子

最新推荐文章于 2024-12-06 16:33:38 发布

阅读量856

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/cuichongyu/article/details/80378994

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack基本使用方法

准备

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

项目结构

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

安装 jquery:

npm i jquery

src/index.js

const $ = require('jquery')

$(function () {
  console.log('cheshi')
})

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="main.js"></script>  
</body>
</html>

打包构建

# 1. 找到 src/index.js 入口文件
# 2. 分析代码中的依赖（说白了就是 require）
# 3. 打包构建，将结果打包到 dist/main.js
npx webpack

执行完以上命令你会发现在项目的 dist 目录下产出了一个文件 main.js。

打开 `dist/index.html` 访问测试

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

收官无敌-曹官子

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【webpack】webpack的基本使用

weixin_43655896的博客

02-13

7772

整理了一些webpack4基本的使用

webpack经典使用方法

YaToue

04-12

235

首先全局安装 cnpm i webpack-cli -g cnpm i webpack -g 然后 webpack -v 查看版本号建立一个xm xm / src文件夹 src / index.js文件（默认入口文件） dist / main.js文件（自动生成默认出口文件 webpack的时候打包生成）在项目根目录cmd npm i...

参与评论您还未登录，请先登录后发表或查看评论

webpack最基本的用法

Mr.Yuan

03-24

582

webpack安装webpack是所以Node.js开发的工具,可通过npm安装,首先要保证node已经安装完毕,可以去node官网下载, 然后通过npm下载webpacknpm install webpack -g我们只需要webpack构建项目, 项目上线后是不需要依赖webpack的所以我们在项目文件夹下安装时候可以安装在dev-dependencies中, 即:npm install we

【前端工程化】Webpack入门（保姆级教程）

最新发布

2403_87076697的博客

12-06

1464

本篇文章通过处理各种资源来介绍 webpack 的一些基础且常用的配置的使用，更多的 loader，plugins 等使用方法还是得到官方文档查询。前端工程化是现代前端开发不可或缺的一部分，它帮助开发者创建可扩展、可维护且高性能的应用程序。随着前端技术栈的不断进步，工程化的最佳实践也在不断发展，以适应新工具和框架的出现。

webpack 使用教程

weixin_54255895的博客

03-11

1291

一、创建文件并初始化webpackwebpack下载后，为什么还要安装webpack-cli呢？因为webpack-cli是执行webpack的一个工具，已经从webpack4以后剥离，所以...在磁盘或者文件cmd 运行以下命令这个时候，项目文件夹会多出一个package.json文件，可以用npm或者yarn安装webpack 和 webpack-cli；

webpack详细使用方法

老虎帅呆了的博客

12-22

1776

一、安装node 二、创建package.json文件 npm init 三、安装webpack npm install webpack -g 四、把webpack依赖写入package.json中 npm install webpack --save-dev 此时已经可以使用webpack命令打包js文件,打包命令 webpack app.js output

Vue中使用webpack别名的方法实例详解

08-27

Vue中使用webpack别名的方法实例详解本文主要介绍了Vue中使用webpack别名的方法实例详解，通过实例讲解了在Vue中如何使用webpack别名来简化文件路径引入，提高开发效率。知识点1：webpack别名的概念在Vue项目...

**webpack 基本使用**

08-20

下面，我们将根据提供的文件信息详细探讨 webpack 的基本使用方法。 #### 开发模式下的资源处理 1. **处理样式资源**：包括 CSS、Less、Sass、Scss 和 Stylus 等。通过不同的 loader（如 `css-loader`、`less-...

webpack的基本原理及手动配置webpack的详细步骤

07-03

以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，webpack中的loader，打包发布，Source Map以及在浏览器中安装vue-devtools调试工具。...

webpack-使用webpack-dev-server.rar

04-12

以上就是关于 `webpack-dev-server` 的基本介绍和使用方法。通过熟练掌握这一工具，你可以更高效地进行前端开发，享受无缝的开发体验。在实际项目中，还可以结合其他工具，如 Babel 转换 ES6+ 语法，或者使用 ...

Webpack4 使用Babel处理ES6语法的方法示例

10-17

以上知识点汇总了Webpack4与Babel结合使用处理ES6语法的基本方法和一些高级优化技巧。掌握了这些知识点，可以有效地将ES6代码转译成可以在旧浏览器中运行的代码，同时控制好打包后的大小，保证应用的性能。

webpack使用教程

dengdongxia的博客

03-11

1300

一、webpack的概念webpack是一个前端工具，可以让各个模块进行加载、预处理，再进行打包，它有gulp和grunt的大部分基本功能，它的最大区别就是提供了模块化解决方案，可以把各种资源作为模块来使用和处理。二、安装与相关配置（包括打包文件）注：以下命令在安装node.js后，在其命令行工具中输入命令步骤如下：1、在要用的webpack的文件夹下初始化npm命令：npm init命令执行完后...

webpack基本用法

weixin_34161032的博客

04-28

1. 压缩代码(production模式) optimization: { minimizer: [new UglifyJsPlugin({ cache: true, parallel: true, uglifyOptions: { output: { comments: false, ...

Webpack的基本使用

道阻且长，行则将至。

10-19

4533

Webpack的基本使用一、什么是Webpack Webpack是一个静态的模块打包工具,当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件 webpack提供了友好的模块化支持以及代码压缩混淆、处理JS兼容问题、性能优化等强大的功能，提高开发效率和项目的可维护性静态：开发的过程中，存在于本地的js/css/图片图标字体文件等，就是静态的动态的内容，webpack没办法处理只能处理静态的二、Webpack安装首先初始化项目 npm init -y 全局安装webpack np

webpack基础用法

qq_42550235的博客

11-23

275

一、webpack概述 webpack是前端项目构建工具(打包工具),可以解决当前web开发中面临的困境。作用：友好的模块化支持、代码压缩混淆、处理js兼容问题、性能优化。 webpack基本使用 1、安装webpack npm install webpack webpack-cli -D 2、在 webpack.config.js的webpack 配置文件 3、在webpack的配置文件中，初始化如下配置： module.exports = { // mode指定构建模式（development/

webpack介绍及用法

小青柑的博客

05-17

204

webpack 参考文档：中文文档英文文档 1,什么是webpack ? Webpack 是当下最热门的前端资源模块化管理和打包工具。 2,webpack 有什么作用 ? (1)它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 (2)将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等 (3)

webpack的使用方法

08-03

### 回答1： Webpack 是一个现代化的 JavaScript 应用程序打包工具，它将多个 JavaScript 文件和其他类型的静态资源（例如 CSS、图片等）打包成一个或多个文件，以便于在浏览器中加载和执行。 Webpack 的基本用法如下： 1. 安装 webpack 和 webpack-cli ``` npm install webpack webpack-cli --save-dev ``` 2. 创建一个 webpack 配置文件 `webpack.config.js`，其中包含打包的入口文件、输出目录、各种加载器和插件的配置等。 ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], }, }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ], }, }; ``` 3. 运行 webpack 命令进行打包。 ``` npx webpack --config webpack.config.js ``` 4. 在 HTML 页面中引入打包生成的 JavaScript 文件。 ``` <script src="dist/bundle.js"></script> ``` 这是一个基本的 webpack 配置示例，其中包含了对 JavaScript、CSS 和图片等资源的处理。根据实际情况，还可以添加其他类型的加载器和插件来实现更丰富的功能。 ### 回答2： webpack是一个现代化的模块打包工具，它可以将项目中的各种资源，如JavaScript、CSS、图片等转换和打包成一个或多个静态资源文件。以下是webpack的使用方法： 1. 安装webpack：首先，需要在项目中安装webpack。可以通过npm（Node Package Manager）命令进行安装。打开命令行窗口，进入项目目录，运行下面的命令进行安装： ``` npm install webpack --save-dev ``` 2. 创建webpack配置文件：在项目根目录下创建一个名为`webpack.config.js`的文件作为webpack的配置文件。 3. 配置入口文件和出口文件：在配置文件中，需要指定项目的入口文件和出口文件。入口文件是指webpack将从这个文件开始找到所有的依赖关系，而出口文件则是指打包后生成的静态资源文件。以下是一个简单的配置示例： ```javascript module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 4. 配置加载器和插件：除了可以打包JavaScript文件，webpack还支持加载和打包各种其他类型的资源文件。可以使用加载器（loader）来处理这些文件，并通过插件（plugin）来扩展webpack的功能。 5. 运行webpack：在命令行窗口中运行`webpack`命令，webpack将读取配置文件，并根据配置文件的内容进行打包。以上是webpack的基本使用方法。另外，还可以通过webpack命令行窗口中的参数来指定不同的打包模式、指定其他配置文件等。通过学习和深入了解webpack的各种功能和选项，可以更加灵活地使用webpack来构建复杂的前端项目。

webpack基本使用方法

webpack基本使用方法

准备

项目结构

src/index.js

dist/index.html

打包构建

打开 dist/index.html 访问测试

打开 `dist/index.html` 访问测试