模块打包机--webpack--基础使用

什么是webpack? 作用有哪些?

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用

作用:

 1、模块化,让我们可以把复杂的程序细化为小的文件;

2、类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可      以识别;

3、Scss,less等CSS预处理器

webpack的基本使用

1、全局安装webpack   npm install webpack -g

2、查看版本号 : webpack -v

3、查看全局安装过哪些模块:npm list -g --depth 0

4、局部安装webpack : npm install webpack --save-dev

5、基础的打包方式 webpack 文件名 生成文件名

温馨提示:webpack4.0以上版本坑比较多,新手建议安装4.0以下版本

1、卸载默认: npm uninstall webpack

2、全局安装: npm install [email protected] -g

3、局部安装: npm install [email protected] --save-dev




1:webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

2:gulp,grunt

Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

<使用webpack>

//全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

原文地址:https://www.cnblogs.com/mahmud/p/10085670.html

时间: 2024-10-06 11:39:10

模块打包机--webpack--基础使用的相关文章

webpack基础配置

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别: Scss,less等CSS预处理器 ... 这些改进确实大大的提高了我们的开发效率,但是利用它们

《nodejs+gulp+webpack基础实战篇》课程笔记(四)-- 实战演练

一.用gulp 构建前端页面(1)---静态构建 npm install gulp-template --save-dev 通过这个插件,我们可以像写后台模板(譬如PHP)一样写前端页面.我们首先学习一下写法. 现在我们创建一个新任务:创建一个裸的index.html文件,然后在body里面写上 ,我的年龄是:<%= age %> 下载好gulp-template,我们引用并配置 var gulp_tpl = require("gulp-template"); gp.tas

webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w

《nodejs+gulp+webpack基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件

还是先来安装本课需要的插件: npm install raw-loader --save-dev //示例:var header = require("xxx.html");就会把html的内容读取出来 这是一个webpack加载器,可以把文件原样返回为字符串. 这里补充下使用加载器的两种方法: 1.在我们的webpack配置文件中写上 {test:/\.html$/,loader:"加载器名称"} //这代表所有html后缀均会使用这个加载器来处理 2.在requ

《nodejs+gulp+webpack基础实战篇》课程笔记(三)--webpack篇

webpack引入 前面我们简单学习了gulp,这时一个前端构建框架---webpack产生了(模块打包) 它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件.(这里有需要了解一下CommonJS规范,具体请自行查看http://commonjs.org). 安装webpack: npm install -g wabpack //这里我们采用全局安装,保证每个项目中都能使用到 设置配置文件:  在项目目录下,新建一个webpack.config.js文件 m

《nodejs+gulp+webpack基础实战篇》课程笔记(七)--利用gulp自动完成配置&quot;吐&quot;给webpack执行

首先,我们利用gulp将入口文件自动化.我们参考该课程的规则,对文件需要成为入口的文件进行一个归类和整理. 首先,我们已经建立了SRC文件夹.在SRC文件下,创建一个主文件夹叫modules.同事创建几个子文件夹,创建的基本规则是:文件夹名就代表了我们的入口节点名. (此图仅供参考,文件夹名与文件名可自定义) 然后我们来到gulpfile.js,写入一个任务,在gulpfile中遍历modules文件夹里的文件夹和子文件(为了演示方便,我们默认遍历2级.第一级必须是文件夹名.第二级必须是js文件

财务模块的一些基础概念

财务会计承担着企业总体信息管理和传递的职能,无论企业采用何种运营模式.经营何种业务,都离不开财务的支持,大多数运营和管理流程均与财务存在着接口,为此,优化.高效的财务运作模式和流程成为确保企业良性发展和业务不断提升的催化剂,财务职能与业务运作紧密集成,实现良性信息共享,将对业务运作给予最大支持. 财务会计由以下模块组成:基础档案及规则.总账.应收管理.应付管理.报销管理.固定资产.存货核算.费用报销.这些模块与其他领域产品相互衔接,共同为企业提供全面的财务集中核算管理. 流程编号 一级流程 二级

《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课

一.多页面分离资源引用,按需引用JS和css 我们前面实现了以下功能:1.新建了一个login模版(用到htmlWebpackPlugin).2.分别把main.js和login.js.reg.js分开写.3.学习了css加载器.我们通过webpack可以打包js文件.自动注入js和CSS引用. 那么我们要加载多页面如何操作呢?现在我们就在/src/tpl 文件夹下新件一个index.html文件,在CSS加入index.css,随便写两个样式,然后在/src/下新建一个index.js,随便写

模块2-1 函数基础

模块2-1 函数基础 原文地址:https://www.cnblogs.com/wiaowupy/p/12254460.html