webpack安装、配置

2024-05-19 10:06:32

webpack官网概念:

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

开始：

首先确保安装了node.js

1.初始化、安装

创建一个文件夹，在文件夹地址栏输入 cmd

如图：

进入命令页：

//初始化
npm init  -y//安装
npm i webpack webpack-cli -D

2.配置文件

打开开发工具：

在文件根目录创建 webpack.config.js

webpack核心概念：

entry：入口

output：出口

plugin：插件

loader：加载器

mode：模式

devServer：本地服务器

开始配置：

创建一个src目录在src下创建 index.js 作为入口文件在创建一个实验文件。测试是否打包成功，

#  index.js
import elem from "./first.js";
document.body.appendChild(elem);#  first.js
let elem = document.createElement("div");
elem.innerHTML = "你好webpack5.0"
export default elem;

在 webpack.config.js中配置

module.exports = {// webpack 概念入口，输出，插件，loaderentry: "./src/index.js", //定义入口文件// 模式 产品，开发mode: "production", //'可选：开发环境 development  // 输出output: {// 路径，__dirname 当前目录path: __dirname + "/dist",// 定义文件名filename: 'main.js',},// 优化选项optimization: {},// 模块module: {},plugins: [// 在webpack的运行过程中(运行过程（生命周期))做一些额外操作处理模板，清理],// 本地服务器配置// npm i webpack-dev-server -D  // 安装本地服务devServer: {open: true, //自动打开浏览器hot: true, //热更新host: "localhost", //本地域名port: 8080, //端口号}
}

注意安装：本地服务：npm i webpack-dev-server -D

使用 npx webpack 命令打包

打包完成后会根据定义的出口输出至定义的文件夹下。生成定义文件名

打开后：

webpack将两个文件合并成功，打包成功

webpack安装、配置相关推荐

安装配置webpack webpack不是内部或外部命令
初次安装webpack,一直报webpack不是内部命令或外部命令,也不是可执行程序问题.发现是webpack安装配置的问题,找了好多解决办法,最后梳理了一下webpack安装配置路径. 安装node ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
vue ---- 工程化概念、webpack概念、webpack的安装配置，以及简单使用
引入jQuery,并使用他操作dom元素 index.js //1. 使用 ES6 中的高级语法, 导入一个jQuery import $ from 'jquery'//2. 定义 jQuery的入口 ...
webPack之安装配置教程
流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step 2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中 ...
【JavaScript】 Webpack安装及文件打包
背景最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
webpack简单配置
webpack有4个重点内容: 入口(entry):指示webpack 应该使用哪个模块,来作为构建其内部依赖图的开始输出(output):告诉 webpack 在哪里输出它所创建的 bundles ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Webpack 5 配置手册（从0开始）
webpack安装顺序 1. `npm init -y`,初始化包管理文件 package.json 2. 新建src源代码目录 3. 新建index.html 4. `yarn add webpac ...
webpack 安装vue（两种代码模式compiler 和runtime）
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

最新文章

热门文章