webpack的安装和使用

简介: 为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理

webpack官网:https://www.webpackjs.com/


目前的最新版本:webpack4


webpack简介


webpack是基于模块化的打包(构建)工具,它把一切视为模块


它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。


webpack的特点:


  • 为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理


  • 简单易用:支持零配置,可以不用写任何一行额外的代码就使用webpack


  • 强大的生态:webpack是非常灵活、可以扩展的,webpack本身的功能并不多,但它提供了一些可以扩展其功能的机制,使得一些第三方库可以融于到webpack中


  • 基于nodejs:由于webpack在构建的过程中需要读取文件,因此它是运行在node环境中的


  • 基于模块化:webpack在构建过程中要分析依赖关系,方式是通过模块化导入语句进行分析的,它支持各种模块化标准,包括但不限于CommonJS、ES6 Module


webpack的安装


webpack通过npm安装,它提供了两个包:


  • webpack:核心包,包含了webpack构建过程中要用到的所有api


  • webpack-cli:提供一个简单的cli命令,它调用了webpack核心包的api,来完成构建过程


安装方式:


  • 全局安装:可以全局使用webpack命令,但是无法为不同项目对应不同的webpack版本


  • 本地安装:推荐,每个项目都使用自己的webpack版本进行构建


使用


webpack


默认情况下,webpack会以./src/index.js作为入口文件分析依赖关系,打包到./dist/main.js文件中


通过–mode选项可以控制webpack的打包结果的运行环境

相关文章
|
4月前
|
JavaScript Windows
安装node.js与webpack创建vue2项目
安装node.js与webpack创建vue2项目
34 1
|
6月前
|
JavaScript 前端开发
webpack成长指北第2章---安装webpack的正确姿势
webpack成长指北第2章---安装webpack的正确姿势
54 0
|
JavaScript 数据安全/隐私保护
Webpack 安装
Webpack 安装
67 0
|
人工智能 JavaScript
nodejs安装webpack详细步骤
nodejs安装webpack详细步骤
|
前端开发
前端学习笔记202303学习笔记第三天-Vue3.0-webpack安装和配置webpack-dev-server
前端学习笔记202303学习笔记第三天-Vue3.0-webpack安装和配置webpack-dev-server
76 0
|
前端开发
前端学习笔记202303学习笔记第二天-安装和配置webpack
前端学习笔记202303学习笔记第二天-安装和配置webpack
71 0
|
前端开发
前端学习笔记202303学习笔记第二天-安装和配置webpack
前端学习笔记202303学习笔记第二天-安装和配置webpack
58 0
|
前端开发
前端学习笔记202303学习笔记第二天-安装和配置webpack2
前端学习笔记202303学习笔记第二天-安装和配置webpack2
61 0
|
JavaScript 前端开发
webpack打包js全局本地安装
webpack打包js全局本地安装
183 0
webpack打包js全局本地安装
Webpack & Webpack-cli 安装成功后查看 webpack -v报错
Webpack & Webpack-cli 安装成功后查看 webpack -v报错
Webpack & Webpack-cli 安装成功后查看 webpack -v报错