webpack（一）

最新推荐文章于 2024-09-21 10:39:31 发布

Queen_zdd

最新推荐文章于 2024-09-21 10:39:31 发布

阅读量217

点赞数

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

本文链接：https://blog.csdn.net/queen_zdd/article/details/80033547

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.为什么会出现webpack？

前端页面越来越复杂，随着SPA技术的流行，JS越来越复杂。并且会需要一大堆依赖包，并且还有SCSS,LESS等扩展所以需要webpack进行打包管理。

2.webpack的作用：

   【1】.可以将多个JS打包成一个文件，减少服务器压力和下载带宽。

   【2】.将其他扩展性语言转换成Js，以便于浏览器解析。

   【3】.项目优化，提升性能。

3.明确两个重要概念：

  （1）.开发环境：在开发时需要的环境，可以指在开发时需要依赖的包。

  （2）.生产环境：开发完成运行程序的环境。

4.步骤：

（1）.创建目录

mkdir webpack_demo  
cd webpack_demo   //创建webpack_demo目录，并切近目录

（2）.全局安装webpack

npm install -g webpack

（3）.初始化——初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等；

npm init

（4）.项目目录的安装

npm install --save-dev webpack  //--save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用

( 5 ).遗留问题

这时候webpack就安装完成了，在3.x中可直接使用webpack -v查看当前版本。 但是在4.x中会出现类似如下图：

这里写图片描述
问题分析：在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。

尝试全局安装webpack-cli

npm install webpack-cli -g

全局安装完成后就可以使用webpack -v查看当前版本了。

6.建立基本项目结构：

在webpack_demo下面建立两个文件夹，src和dist

src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
如下图：这里写图片描述
1.我们在dist文件下手动建立一个index.html文件，并写入下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jspang webpack</title>
</head>
<body>
    <div id="title"></div>
    <!-- bundle.js是webpack执行打包命令后生产的文件 -->
    <script src="./bundle.js"></script>
</body>
</html>

2.接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。

document.getElementById("#box).innerHtml("hello webpack")

7.打包项目：

webpack src/entry.js dist/bundle.js

这时候又会出现报错：
这里写图片描述

中文意思就是：
1.mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
2. 无法解析’dist/bundle.js’ in ‘F:\web\demo1\webpack_demo’

原因是：webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack –mode development或者webpack –mode production，这样便会默认进行打包，入口文件是’./src/index.js’，输出路径是’./dist/main.js’，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

所以我们需要修改dist/entery.js为index.js。修改之后直接使用webpack –mode development进行打包。

出现下图：
这里写图片描述
此时打开浏览器就会出现：hello webpack即为正确。