webpack
文章平均质量分 57
坏萝卜
这个作者很懒,什么都没留下…
展开
-
配置文件分离
配置文件分离将webpack.config.js文件分成三个配置文件,删除webpack.config.js文件。后面就可以分时候使用对应的配置文件。(这里对应的是webpack@3.6.0版本)需要安装webpack-merge来进行配置文件合并:npm install webpack-merge@4.1.5 --save-devdev.config.js开发时配置文件const webpackMerge = require('webpack-merge')const baseConfi原创 2021-07-11 12:11:49 · 278 阅读 · 0 评论 -
搭建本地服务器
搭建本地服务器webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。不过它是一个单独的模块,在webpack中使用之前需要先安装它(这里对应的是webpack@3.6.0版本)npm install --save-dev webpack-dev-server@2.9.1devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:1.contentBase:为哪一原创 2021-07-11 12:07:38 · 245 阅读 · 0 评论 -
plugin
plugin是什么?1.plugin是插件的意思,通常是用于对某个现有的架构进行扩展。2.webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。loader和plugin区别loader 主要用于转换某些类型的模块,它是一个转换器。plugin 是插件,它是对webpack本身的扩展,是一个扩展器plugin的使用过程:步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)步骤二:在webpack.config.原创 2021-07-10 17:40:27 · 3149 阅读 · 0 评论 -
webpack中的loader
什么是loaderloader是webpack中一个非常核心的概念。webpack用来做什么呢?在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括 一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说,对于这些转化是不支持的。原创 2021-07-09 18:18:58 · 3778 阅读 · 0 评论 -
webpack.config.js和package.json配置
webpack.config.js配置入口 和出口如果每次使用webpack的命令都需要写上入口和出口作为参数,就非常麻烦。只需要将两个参数写到配置 中,就可以 解决。const path = require('path')module.exports = { //入口:可以是字符串/数组/对象,这里我们入口只有一个,所有写一个字符串即可 entry:'./src/main.js', //打包入口路径 //出口:通常是一个对象,里面至少包含两个重要属性,path和fi原创 2021-07-09 17:13:11 · 392 阅读 · 0 评论 -
webpack介绍和安装及基本使用
1.什么是webpack?(前端模块化打包工具)从本质上 来讲,webpack是一个现代的JavaScript应用的静态模块打包工具但是它是什么呢?我们从两个点来解释:模块 和 打包1.1前端模块化目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行原创 2021-07-09 15:31:22 · 137 阅读 · 0 评论