webpack-dev-server 配置以及webpack教程

ktuor

已于 2023-09-22 06:11:51 修改

阅读量4k

点赞数

分类专栏：前端文章标签： webpack 前端 javascript

于 2022-02-09 10:47:37 首次发布

本文链接：https://blog.csdn.net/weixin_40254430/article/details/122836674

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack是什么?一开始我也不理解?

看了许多文档都是在扯淡，摞了一大堆,点子却没说到。

当然我说的可能也不对，希望诸位取其精华，去其糟粕。

因为包括官方文档，虽然翻译说的是人话，但是你却找不出一点点有用的有效的信息。

至于其他人的就是罗里吧嗦一大堆。写这个，就是想说，这玩意其实很简单。

包括在php上，就是php的blade指令。

不过php是直接略过了。

压根没当回事。

是因为每个人的思维不透明。

才造成交流沟通的困难。我这里写这个就是希望可以帮助到大家。

webpack其实就两个关注点。

模块化和打包

模块化是什么意思。简单来说，一个网页中的资源都可以当做模块分离开来。

比如css,less,sass,图片，视频，语音，包括页面的不同部分，这些都可以当做模块分离开来。

但是，这里就涉及到一个问题。就是说，浏览器有的时候支持解析其中一部分。其他无法解析。

这个时候就需要通过打包处理各个模块中的关系。依赖？就是这样来的。

打包能处理各个模块的依赖关系，把各个模块我猜测是转译为浏览器可解析的程序执行。

好的，webpack就是如此简单。当然，一切都是我的猜测。但是不妨碍我们理解。

接下里就是环境的配置

一开始我是准备学习vue的，但是在学习过程中，发现了一个问题，就是说js不支持import语法？？？
我也是十分懵逼。

没办法，造webpack吧
啥也不懂?这就是是痛苦的开始。
这里就不浪费大家的时间了。

安装 node.js 以及chrome ,以及vscode 这个安装过程就不说了，自行百度。

node.js安装完成之后，最好安装在c盘，即默认安装位置。会省下一大堆麻烦。

之后就是设置环境变量，直接把node.js安装路径复制到环境变量里面。即C:\Program Files\nodejs

之后启动cmd中以管理员身份运行这里要说一句有的系统,环境变量更新需要重启cmd

之后使用node -v 检测是否安装成功

然后就可以使用npm 了

接下来

首先新建根目录文件夹
之后新建项目文件夹

项目文件夹中有两个文件
package.json
这个使用npm init -y 生成
webpack.config.js
一个存放源代码的文件夹src
src中创建index.html index.js
创建文件夹之后就本地安装webpack webpack-cli webpack-dev-server

其中版本对应的依赖关系为

webpack 4 5

webpack-cli 3 4

webpack-dev-server 3 3

因此推荐组合版本分别为webpack@5.42.1 webpack-cli@4.9.2 webpack-dev-server@3.11.2

必须选对版本，否则不兼容

在使用npm 之前建议更换镜像源
命令如下:
npm config set registry https://registry.npm.taobao.org

不过更建议使用yarn

使用npm install yarn -g

使用yarn 分别安装三个版本即可使用 -S 本地安装

其中各文件的内容如下:
package.json:
   {
   "name": "demo3",
   "version": "1.0.0",
   "description": "",
   "main": "webpack.config.js",
   "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev":"webpack serve --open"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
   }

webpack.config.js:
let path = require("path");

       module.exports ={
       entry:"./src/index.js",
       output:{
       filename:"bundle.js",
       path:path.resolve(__dirname,"dist")
       },
       mode:"development"
       }
src
index.html:
       <!DOCTYPE html>
       <html lang="en">
       <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <script src="bundle.js"></script>
       </head>
       <body>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       </body>
       </html>

index.js:

import $ from "jQuery";

       function fn1(){
       console.info("fn1");
       }

$("li:odd").css("background_color","red");
$("li:even").css("background_color","pink");

参考文档:
   https://blog.csdn.net/yw00yw/article/details/81354533
   https://blog.csdn.net/weixin_45329397/article/details/120711784
   https://blog.csdn.net/weixin_40599109/article/details/109582365
   https://www.jianshu.com/p/043034c120ca
   https://www.cnblogs.com/cythia/p/10985080.html

ktuor

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
webpack-dev-server 配置以及webpack教程

webpack是什么?一开始我也不理解?看了许多文档都是在扯淡，摞了一大堆,点子却没说到。当然我说的可能也不对，希望诸位取其精华，去其糟粕。因为包括官方文档，虽然翻译说的是人话，但是你却找不出一点点有用的有效的信息。至于其他人的就是罗里吧嗦一大堆。写这个，就是想说，这玩意其实很简单。包括在php上，就是php的blade指令。不过php是直接略过了。压根没当回事。是因为什么被搞复杂了。是因为每个人的思维不透明。才造成交流沟通的困难。我这里写这个就是希望可以帮助到大家。webpack其实就两个关.
复制链接

扫一扫