Webpack
文章平均质量分 62
关于Webpack
Continue丶
努力变得更好一点
展开
-
Webpack:配置分离
1. 为什么需要将配置分离因为在我们写代码时,存在两个环境。一个是开发环境(development),一个是生产环境(production)。开发环境:开发时方便进行调试与运行所需的环境,比如本地的服务器运行。生产环境:最后webpack打包所需要的环境,比如js的压缩。所以为了遵循逻辑分离,方便后续的处理,通常将它们分为三个文件base.config.js :基础配置文件,开发和生产都需要用到的配置prod.config.js:生产配置文件,生产时才需要用到的文件dev.config.js原创 2021-04-24 12:48:54 · 426 阅读 · 0 评论 -
Webpack:搭建本地服务器
1. 概述webpack提供了一个可选的基于node.js的本地开发服务器,内部使用了express框架,可以实现我们想要让浏览器自动刷新显示我们修改后的结果。2. 安装因为它是一个单独的模块,需要安装npm install webpack-dev-server --save-dev3. 配置 devServer: { contentBase: './dist', inline: true }contentBase:为哪一个文件夹提供本地服务器,默认根文件夹inli原创 2021-04-24 11:18:42 · 223 阅读 · 0 评论 -
Webpack:插件plugin
文章目录1. 概述2. 和loader的区别3. 使用过程3.1 BannerPlugin添加版权3.2 html-webpack-plugin 打包html3.3 uglifyjs-webpack-plugin 压缩js1. 概述在webpack中,有时候我们需要用到扩展功能,比如添加版权、打包html、压缩js文件,这时候就可以用到插件plugin。2. 和loader的区别loader:用于加载转换某些类型的模块,是一个转换器plugin:插件,对webpack进行扩展,是一个扩展器3原创 2021-04-24 11:10:00 · 147 阅读 · 0 评论 -
Webpack:loader配置
文章目录1. 概述2. 使用2.1加载css2.2 加载图片3. 加载vue1. 概述loader是webpack中非常核心的概念。那么loader是什么呢?顾名思义:loader,装载者。用来帮助webpack装载一些功能处理,比如加载css、less转义、加载图片、ES6转ES5等等2. 使用1.通过npm安装需要的loader2.在webpack.config.js中的modules关键字下进行相应配置那问题来了,我怎么知道要下什么loader?又怎么进行配置?其实webpack原创 2021-04-24 00:37:20 · 543 阅读 · 0 评论 -
Webpack:基础使用
文章目录1. 准备工作2. 使用webpack3. 运行1. 准备工作创建dist和src文件夹dist文件夹: 用于存放之后打包的文件src文件夹 :用于存放我们写的源文件index.html :主运行html自定义以下三个js文件做测试main.js:入口文件common.js:用CommonJS语法规范的模块化文件ES6.js:用ES6语法规范的模块化文件common.jslet name = 10;function add(x, y) { return x + y}原创 2021-04-23 20:48:46 · 42 阅读 · 0 评论 -
Webpack:初识
文章目录1.什么是webpack?2. webpack中的模块化3. 与grunt/gulp 对比4. webpack的安装1.什么是webpack?官方解释:从本质上讲,webpack是一个现代的JavaScript应用的静态模块打包工具。其实,我们就可以将webpack看成两个词语: 模块化、打包模块化: 简单地说,模块化就是将代码抽离成一个个功能模块,目的就是为了方便对代码块的复用以及能起到防止变量污染的作用。拓展:其他能起到模块化规范的还有 CommonJS 、AMD 、CMD 、ES6原创 2021-04-23 16:50:44 · 87 阅读 · 0 评论