Webpack 入门(一)：安装 / 打包 / 命令行

最新推荐文章于 2023-02-27 18:19:40 发布
最新推荐文章于 2023-02-27 18:19:40 发布
阅读量1.1k 收藏
点赞数
分类专栏： webpack

*注：以下操作的前提是已全局安装node 和 webpack

一：安装webpack和基本环境搭建

新建一个工作的文件夹（我取的名字叫Webpack） 
打开命令行，cd进入该文件夹

//初始化一下npm

> E:\work\Webpack>npm init
  • 1
  • 2
  • 3

然后按照提示输入这个项目的一些信息，不想填也可以一直按回车。

//安装Webpack
> E:\work\Webpack>npm install webpack --save-dev
如果这一步报错，说明你没有全局安装webpack，全局安装webpack的命令行是：
npm install webpack -g
  • 1
  • 2
  • 3
  • 4

这样一个webpack的基本框架就出来了，下面试一下它的打包功能

二：webpack的打包功能

在该工作文件夹下新建一个hello.js，随便输入一点函数

function hello(str){
    alert(str);
}
  • 1
  • 2
  • 3

然后在命令行中将这个hello.js打包为hello.bundle.js

> E:\work\Webpack>webpack hello.js hello.bundle.js

//这句命令的意思是将hello.js打包，并且打包后的文件名称为hello.bundle.js
//在打包过程中会生成一些webpack需要的require
  • 1
  • 2
  • 3
  • 4
  • 5

然后同样的，在该项目下新建一个world.js，随便输入一点函数

function world(){
    return{
        //返回一个空     
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5

接下来，在hello.js中将这个函数引用进来

require('./world.js');
//要注意文件的引用路径，不然打包的时候会报错。
  • 1
  • 2

在命令行中打包hello.js（和上面一样的命令）

> E:\work\Webpack>webpack hello.js hello.bundle.js
  • 1

可以在命令行窗口中看到提示信息： 
这里写图片描述 
其中： 
Hash：表示这次操作的哈希值( 可以先不管 ) 
version：版本号 
下面的信息主要表达的是： 这次打包中包含的文件，打开hello.bundle.js，可以在最后看到打包进去的代码块。

三：使用webpack打包css文件

接下来，我们在同样的层级下新建一个style.css

body{
    background-color: pink;
    margin: 0;
    padding: 20px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

然后在hello.js中引入style.css

require('./style.css');
  • 1

命令行中打包hello.js

> E:\work\Webpack>webpack hello.js hello.bundle.js
  • 1

这时：你会发现报错了，报错信息： 
这里写图片描述 
重要看错误信息里面的：

> You may need an appropriate loader to handle this file type.
  • 1

说明webpack是不支持css这种类型的，如果要支持css需要依赖loader的，解决方式如下： 
命令行输入

> npm install css-loader style-loader --save-dev
  • 1

回车安装loader，安装完毕之后，在hello.js中，要指定css文件的loader

//将之前写的require('./style.css');改成下面的语句

require('css-loader!./style.css');

//这句话的意思是在使用这个css文件之前必须经过loader的处理
  • 1
  • 2
  • 3
  • 4
  • 5

在命令行中打包hello.js

> E:\work\Webpack>webpack hello.js hello.bundle.js
  • 1

这里写图片描述 
显示如上信息说明打包成功。

接下来，可以新建一个html文件，这个html文件中随便写点东西，并且要把打包后的文件hello.bundle.js文件引入进来。如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试webpack的Index测试</title>
        <script src="hello.bundle.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        hello!!!
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

同时，我们需要在hello.js里面将刚刚写的函数执行，如下：

require('./world.js');
require('css-loader!./style.css');

function hello(str){
    alert(str);
}

hello('hello echo!');
//这是要添加的
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

打开命令行，运行一次webpack hello.js hello.bundle.js 
这里写图片描述 
如上，打包完成。 
然后在浏览器中打开刚刚写的html文件，发现hello.js被执行了 
这里写图片描述

可是有一个问题，虽然我们执行了hello.js，但是在hello.js中引入的style.css却并没有被执行，这是因为在require的时候，除了指定css-loader，还需要指定style-loader，修改hello.js代码如下：

require('./world.js');
require('style-loader!css-loader!./style.css');

function hello(str){
    alert(str);
}

hello('hello echo!');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

使用命令行再次运行下，打开html文件，就会发现css样式已经被执行了。 
打开浏览器的控制台查看源码可以得到： 
css-loader作用是让webpack可以解析执行css文件，而style-loader是为了生成一个style标签，并且将解析后的css文件插入到style中去

那么又会出现一个问题，是不是我们以后每次写css，都要这样重复的去reqiure？ 
在webpack中可以全局的指定命令，将hello.js中的require(‘style-loader!css-loader!./style.css’); 修改为之前的require(‘./style.css’); 
然后打开命令行，输入以下的命令

E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"

//window下的css=style-loader!css-loader需要使用""括起来，如果是Mac的要变成单引号。
  • 1
  • 2
  • 3

打开html文件，css样式存在，说明指令已经生效。

可是还是有一个问题，就是当我们每一次修改文件的时候，都要重新执行一下命令行命令，可以说很麻烦了。

watch打包文件

所以在刚刚命令的基础上，我们可以修改下，让css自动更新，自动打包。命令如下：

> E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch
  • 1

我们来测试一下，打开hello.js，随便更改一点内容，

require('./world.js');
require('./style.css');

function hello(str){
    alert(str);
}

hello('hello echo!hhhhhh更改一下');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这时，不用再次在命令行中输入指令，直接打开浏览器刷新，可以发现刚刚修改的已经同步了。（感觉好玄幻哈哈哈哈哈）

四：webpack的其他指令

webpack还有很多其他的指令，比如： 
1： - -progress 显示打包过程的进度

E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress
  • 1

2：- -display-modules 显示打包的模块

E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-modules
  • 1

3： - -display-reasons 显示打包这些模块的原因

E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" -
小灰小汇
关注
专栏目录
Webpack打包
qq_38482933的博客
08-24 171
1.什么是webpack？ 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 2.为什么使用webpack 现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 3377
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
webpack打包
weixin_64948861的博客
02-27 823
简介：webpack是一个前端资源构建工具 ，一个静态资源打包器。在webpack看来，前端的所有资源文件（js/json/img/less/....）都会做为模块处理。它根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）
webpack(一) 安装,打包和打包配置
x94410891的博客
06-08 432
webpack 一.介绍 webpack是一个模块打包工具，通过依赖处理模块，并生成那些模块静态资源。它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qdc5eVDC-1623141971720)(C:\Users\dell\AppData\Roaming\Typora\typora-user-imag
Webpack 安装配置及打包详细过程
weixin_48286699的博客
11-18 267
Webpack sass gulp转换成css文件 一个页面很多个js文件，维护只能加 轻易不能删 页面的优化，js/html/css文件的压缩，图片压缩 什么是webpack 打包工具 （静态资源打包工具） 前端必备 它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 webpack 的特点？ js依赖进行整合处理 （打包整合） 一些预处理的sass，less可以在环境中进
Webpack入门指南：前端资源打包工具详解
前端资源打包工具介绍 ## 1.1 什么是前端资源打包工具 在前端开发中，前端资源打包工具是指能够将多个前端资源文件（如JavaScript、CSS、图片等）进行合并、压缩、优化等处理的工具，旨在提高前端项目的性能和...
Webpack
zyh_haha的博客
02-19 1088
学习webpack
Webpack入门指南：安装、配置和基本使用
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它主要用于处理模块之间的依赖关系，将多个模块打包成一个或多个合并的文件。 ## 1.2 Webpack的优点和特点 - 灵活的模块打包器，支持 CommonJS、AMD、...
Webpack入门指南：模块打包和构建工具
Webpack是一个模块打包和构建工具，用于将多个模块打包成一个或多个bundle文件。它是现代前端开发中最常用的工具之一。Webpack具有强大的模块化能力，可以处理JavaScript、CSS、图片等各种类型的模块，并将它们打包...
Webpack入门指南：前端资源模块打包工具
Webpack入门介绍 ## 1.1 什么是Webpack Webpack 是一个静态模块打包工具（module bundler），它主要用于 JavaScript 应用程序的静态模块打包。Webpack 会将各个模块（如 JavaScript、样式、图片等）视作资源，...
Webpack详细教程
qq_42453562的博客
08-25 1777
webpack第 1 章：webpack 简介1.1 webpack 是什么1.2 webpack 五个核心概念1.2.1 Entry 入口(Entry)1.2.2 Output 输出(Output)1.2.3 Loader1.2.4 Plugins1.2.5 Mode第 2 章：webpack 的初体验2.1 初始化配置三级目录第 3 章：webpack 开发环境的基本配置第 4 章：webpack 生产环境的基本配置第 5 章：webpack 优化配置第6 章：webpack 配置详情第 7 章：web
一个简单的webpack打包
sinat_39314915的博客
03-10 1273
首先全局安装webpacknpm install  webpack -g查看webpack 版本 webpack -v如果出现以下错误The CLI moved into a separate package: webpack-cli.Please install 'webpack-cli' in addition to webpack itself to use the CLI.-&gt; Wh...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值