webpack 入门教程(一)

webpack 简介

webpack 入门教程(一)

上图是在webpack官网展现的图片,从图中可以看出,我们常用的js、css、less、静态资源文件等都可以通过webpack转换为一个静态文件,将代码压缩打包

什么是webpack

webpack是一个前端构建工具,前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开发环境的代码是为了更好的阅读,而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如,开发环境的代码,要通过混淆压缩后才能放在线上运行,这样代码体积更小,而且对代码执行也不会有任何影响。

webpack也是?个模块打包?具,可以识别出引?模块的语法 ,早期的webpack只是个js模块的打包?具,现在可以是css,png,vue的模块打包?具

创建项目

  • 初始化项目命令

npn init -y    //-y表示接受npm默认值,自动按下回车的效果

在node开发中使用npm init初始化后会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中

webpack 入门教程(一)

安装webpack

如果想要安装webpack,则需要node.js环境的支持,可以选择node官方网站安装

安装完成后可以通过  node -v 查看是否安装成功
  • 局部安装:(全局 -g)

npm i webpack webpack-cli -D
  • 安装指定版本:

npm install webpack@x.xx webpack-cli -D
  • 检查安装是否成功:

npx webpack -v// npx帮助我们在当前项?中的node_modules?查找webpack
  • 查看webpack的历史发布信息

npm info webpack

 

 

webpack 入门教程(一)

webpack 入门教程(一)

上一篇:「Kubernetes」- 使用 Fluentd 收集日志 @20210414


下一篇:使用Visual Studio Code进行前端开发并运行前端页面时提示:npm WARN Local package.json exists, but node_modules missing, did you mean to install?