webpack 起步

最新推荐文章于 2024-10-27 22:08:58 发布
最新推荐文章于 2024-10-27 22:08:58 发布
阅读量265 收藏
点赞数
分类专栏： WEB前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011944141/article/details/100119412
版权

概念

官方解释：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
自我理解：
webpack 用于管理资源（css，js，图标，字体等），解决依赖，构建为我们需要的前端资源
（说白了就是我们不用去关心复杂的依赖关系，由它来协助我们管理）。

基本安装

mkdir webpack-demo && cdwebpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
npm install --save lodash
mkdir dist
mkdir src
touch dist/index.html
touch src/index.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack起步</title>
  </head>
  <body>
    <script src="bundle.js" charset="utf-8"></script>
  </body>
</html>

index.js

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

执行命令

npm run build

Hash: ff08386f744d6a405df0
Version: webpack 4.39.2
Time: 253ms
Built at: 08/28/2019 2:40:24 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  70.7 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 304 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

目录结构：

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

浏览器访问 index.html绝对路径

Hello webpack
#成功啦

文档

https://www.webpackjs.com/guides/getting-started/

majinbo111
关注
专栏目录
webpack起步 - 打包JS文件
YinXiaobo
12-03 547
webpack起步 - 打包JS文件 1. 使用 NPM 安装 webpack 要安装最新版本或者特定版本，请运行一下命令： npm install webpack --save-dev npm install webpack@&amp;amp;amp;lt;version&amp;amp;amp;gt; --save-dev 2. 在目录下新建 app.js 作为入口文件，新建 sum.js ，index.html app.js :...
《Vue入门到精通系列之三》--- webpack详解
2301_82244343的博客
04-20 1212
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具模块和打包package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。如何执行我们的build指令呢？1.6.css-loader的使用loader是webpack中一个非常核心的概念。webpack用来做什么呢？
webpack起步
Sun~Neo
04-17 205
1、webpack安装 1.1、安装最新NodeJS 1.2、创建webpack-demo目录(cmd操作) mkdir webpack-demo cd webpack-demo 1.3、初始化 package.json npm init -y 1.4、安装 webpack 和 webpack-cli npm install webpack webpack-cli --sa...
webpack（三）：webpack起步
wangdongm123的博客
01-16 251
创建如下文件和文件夹： dist文件夹：用于存放之后打包的文件 src文件：用于存放我们写的源文件 3.1commonJS模块化导出 这是基于nodejs使用的导出方式，没有nodejs的支撑是无法使用的！ module.exports= {} 导出 3.2commonJS模块化导入 require导入 3.3js文件的打包   现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗...
Webpack2 起步
Riptide
04-05 712
Webpack2 起步 最初翻译于2017年1月初，后来觉得翻译的不好就删掉了...现在恢复~ 说不定对别人有帮助 What is webpack 简而言之，webpack是一个JavaScript模块打包工具。但是它可以用来托管并且管理你所有的前端代码（至少它被开发出来的目的或者说社区希望达到的目标是这样的） 传统的构建工具执行任务的方式是： 你的cs
react-typescript-webpack-starter
04-01
《React + TypeScript + Webpack 起步指南》 在当今的前端开发领域，React、TypeScript 和 Webpack 的组合已经成为构建复杂Web应用的主流选择。这个名为 "react-typescript-webpack-starter" 的项目，正是为了帮助...
webpack中文文档笔记——起步
ass_ace
12-10 525
private ：true 确保我们安装包是私有的(private) 移除 main ：“index.js” 可以防止意外发布你的代码 2.webpack 的项目结构中的src文件和打包完的dist文件夹的区别： src “源”代码是用于书写和编辑的代码 dist 是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载 npm install --save ...
Webpack安装方式、webpack-dev-server、html-webpack-plugin、各种loader、Babel、vue如何使用
AnMuMuPrincess的博客
12-06 205
Webpack起步 为什么使用webpack 1.网页引用的静态资源（JS,CSS,Images，字体文件，模板文件）多了以后会发起很多的二次请求 2.要处理错综复杂的依赖关系 什么是webpack 基于前端的一个项目构建工具，是基于Node.js的一个前端工具，可以对项目进行合并、压缩、精灵图、图片的Base64编码 webpack两种安装方式 运行npm i webpack -g全局使用webpack命令 项目目录 在终端中输入npm init -y生成package.json配置文件 node_m
webpack-起步
yuxiaoc的博客
11-04 257
这个系列将记录webpack5 的学习。 常规目录结构： webpack-demo |- package.json |- webpack.config.js |- /dist |- index.html |- /src |- index.js 作用：静态打包工具，编译javascript 等 安装： npm init npm install webpack webpack-cli -D 新建webpack.config.js const path = re
webpack 简单构建起步
zhiying_08的博客
05-05 220
前提：确保node.js存在且是最新版本第一步：创建一个空文件mkdir webpack &amp;&amp; cd webpack第二步：初始化npm  npm init第三步：本地安装webpack 和webpack-clinpm install webpack --save-dev npm webpack-cli --save-dev第四步：创建目录结构和文件内容dist/index.htm...
2、webpack 起步
gosenkle的专栏
05-21 224
1、创建目录初始化npm，并安装webpack和webpack-cli mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 2、工程目录更如下 webpack-demo |- webpack.config.js // webpack配置...
简单易懂的webpack入门
秋扬诺布的笔记本
03-30 1848
简单易懂的webpack入门本文比较初级且详细易懂适合没怎么接触过Webpack，而又对webpack感兴趣的人参考； 最近这些天有几个朋友在刚开始使用webpack中遇到问题，所以想写一篇自己的立即，因为水平有限但是尽力让本文一目了然；nodejs与npmwebpack webpack安装 webpack打包 loader——模块加载器 webpack配置说明 webpack.config.js
webpack学习从基础学起
kokunka的博客
04-23 2015
webpack学习从基础学起一、webpack的起步二、webpack的配置三、webpack的loader3.1 css-loader的使用3.2 less-loader的使用3.3 url-loader的使用3.4 file-loader的使用
webpack新手教程2021
AhCola
04-19 393
webpack快速入门2021 本篇文章转自：我的个人网站。 本篇教程适用于webpack初学者。这个也是我自己学习webpack时，整理的一些笔记，适用于新手。 本教程源码地址：https://github.com/pengfeiw/webpack-tutorial 可以打开编辑器，跟着我的步骤，一步步向下学习。 一.什么是webpack 作为一个javascript前端开发者，肯定都知道webpack这个东西，也知道各种各样的module。webpack作为一个打包工具，就是将各种各样的模块捆绑（打包）
2024年大数据最全【webpack】从零开始配置webpack系列(基础篇)_webpack (1)
2401_84187537的博客
05-02 1041
打开终端，来到项目根目录。此时会生成一个基础的文件。
Webpack脚手架项目初始化以及优化
最新发布
qq_39465114的博客
10-27 702
本次脚手架需要引入react和typescript，然后配置webpack，配置环境变量，配置文件别名，最后对构建速度优和构建产物优化。
Webpack入门
热门推荐
越努力，越幸运！
04-05 1万+
Webpack 是什么webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。 其主要特性如下： 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS
webpack基础配置与使用指南
在项目起步阶段，一般会创建一个`src`目录存放源代码，一个`dist`目录用于存放编译后的文件。在webpack配置文件中，会定义入口文件（entry）和输出文件（output），以及需要加载的loader和插件，以满足项目的特定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值