Webpack
文章平均质量分 92
webpack基础知识
crazy的蓝色梦想
小柒 爱前端
展开
-
手把手教你搭建 Webpack 5 + React 项目
在平时工作中,为减少开发成本,一般都会使用脚手架来进行开发,比如。脚手架都会帮我们配置好了 webpack,但如果想自己搭建 webpack 项目要怎么做呢?原创 2023-05-03 15:23:02 · 3329 阅读 · 3 评论 -
基于 webpack 5 实现自定义 loader
基于 webpack 5 创建自定义 同步、异步loader,在此基础上实现一个简易的渲染 markdown 的 loader 和 合成雪碧图的 loader。原创 2022-07-30 20:11:44 · 1243 阅读 · 2 评论 -
看完这篇你一定懂 --- Webpack4 打包优化
前面的话Webpack升级4之后,小柒踩过的很多坑,这篇文章总结Webpack4的一些新特性,以及常见的优化方式。Webpack4 新特性不再强制需要webpack.config.js配置文件。默认入口为./src/index.js,默认输出./dist目录,输出文件main.jsWebpack不再能单独使用,4.x版本的很多命令都移动到了webpack-cli中。所以必须安装we...原创 2020-03-28 21:54:04 · 2687 阅读 · 0 评论 -
babel-register与babel-node
前面的话最近做项目用到这两个模块,用法记录一下。原文地址:babel-register 和 babel-node 的使用使用Babel 6 中 babel-register 和 babel-node 两个模块是开发时非常好用的转码工具。先来看一下如何使用:1、 babel-register安装:npm install babel-register作用:babel-regist...原创 2020-03-13 14:48:52 · 1495 阅读 · 0 评论 -
eslint-loader的用法
文章截取原文: ESLint的用途eslint 的作用1.审查代码是否符合编码规范和统一的代码风格;2.审查代码是否存在语法错误;.editorconfig、.eslintignore、.eslintrc.js 文件.editorconfig文件(主要用于配置IDE)规范缩进风格,缩进大小,tab长度以及字符集等,解决不同IDE的编码范设置。EditorConfig 插件会去查找...原创 2020-03-13 14:11:58 · 11310 阅读 · 0 评论 -
devDependencies与dependencies 的区别
devDependencies与dependencies 的区别devDependencies 用于开发环境devDependencies:所依赖的包,在开发环境可以使用,但是在生产环境不会被打入包内。命令–save-dev代表开发环境,将会安装到devDependenciesdependencies 用于生产环境dependencies: 所依赖的包,在开发环境可以使用,在生...原创 2020-03-12 12:12:45 · 589 阅读 · 0 评论 -
webpack和grunt/glup相比有什么特性?
为什么选择webapck?首先,它们都是时代的产物,现在为webpack几乎是构建工具的首选。其次,最大的原因是:web开发向模块化发展。Grunt和Gulp的工作方式Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。Webpack的工作方式在Webpack中,一切皆模块,通过一个给定的主文件...原创 2020-03-11 21:55:23 · 243 阅读 · 0 评论 -
通过Node.js API启动webpack
前面的话webpack除了可以通过可执行命令启动webpack,还通过node.jsAPI启动webpack。通过调用webpack模块暴露出的API,可在Node.js程序中调用webpackAPI执行构建。下面介绍如何在node中通过可执行文件启动webpack。整体架构main.js入口文件webpack.config.js: webpack配置文件webpack.js:在n...原创 2020-01-19 13:08:13 · 1859 阅读 · 0 评论 -
理解webpack中的process.env.NODE_ENV
什么是process?process是node的全局变量,这个变量有一个env属性。任意创建一个js文件(index.js),打印process变量(console.log(process)),使用node环境运行:node index.js可以看到process的内容:process.env.NODE_ENV的作用这个变量不是process.env本来就有的,是通过设置得到的。...原创 2020-01-17 17:53:36 · 7465 阅读 · 0 评论 -
构建Npm模块
前面的话我们平时都是使用npm仓库中别人的模块,如果我们想自己创建模块并且发布到Npm仓库供别人使用,应该如何操作呢?Npm仓库的模块特点在每个模块根目录下都应该必须有一个描述该模块的package.json文件。模块中的文件已JavaScript文件为主,但不限于JavaScript文件,也可以同时有JavaScript、css、图片文件模块最好遵守CommonJs模块化规范(目前支...原创 2020-01-12 12:27:44 · 1517 阅读 · 0 评论 -
webpack构建同构应用
前面的话同构应用是指:写一份代码但同时在浏览器与服务器中运行的应用。这篇文章介绍如何使用webpack构建同构应用。例子是参考《深入浅出webpack》。同构应用原理同构应用的运行原理是使用虚拟dom,不直接操作DOM,而是通过JavaScript Object描述原本的DOM结构。在需要更新DOM时,不直接操作DOM树,而是在更新JavaScript Object后再映射成DOM操作。r...原创 2019-11-25 20:20:08 · 226 阅读 · 0 评论 -
SSR服务器渲染
前面的话平时我们所接触到的都是SPA,在学习使用webpack构建同构应用时,接触到了SSR服务器渲染,下面来说一说SSR。什么是SPA传统的SPA(单页应用)是前后端分离,后端负责提供数据,前端加载完后体验,内容改变不需要加载全部页面,缓存数据,减少服务器压力,提高性能。SPA工作流程第一次将前端搭建的构建脚本资源全部下载下来,然后运行脚本异步加载数据,渲染页面。这样造成的结果:...原创 2019-11-25 19:52:05 · 444 阅读 · 0 评论 -
AutoWebPlugin插件的使用
前面的话前面一篇文章中介绍了web-webpack-plugin插件的一个功能:为单个应用生成HTML,其主角是WebPlugin。这篇文章介绍这个插件的另一个功能:管理多个单页应用,其主角是AutoWebPlugin。本篇文章的例子是接着上一篇的例子来说的。功能AutoWebPlugin 可以找到一个目录下所有的页面入口,自动为所有的页面入口配置一个WebPlugin输出对应的 html。...原创 2019-11-21 15:23:28 · 1961 阅读 · 1 评论 -
web-webpack-plugin插件的使用
前面的话对于html-webpack-plugin这个插件,想必都不陌生。小柒在学习《深入浅出webpack》这本书时,书中介绍了web-webpack-plugin这一插件,是html-webpack-plugin的一个很好的替代品。下面来介绍一下这个插件。作用为单页应用生成 HTML管理多个单页应用使用安装npm install -D web-webpack-plugin/...原创 2019-11-19 20:35:14 · 1421 阅读 · 0 评论 -
webpack3中的插件extract-text-webpack-plugin已废弃
前面的话在webpack3中的extract-text-webpack-plugin用来提取css代码到一个单独的文件中,但在webpack4中将这个插件换为mini-css-extract-plugin。使用方法在配置文件中引用mini-css-extract-plugin插件在plugins选项中实例化此插件const MiniCssExtractPlugin = require...原创 2019-11-19 19:29:51 · 649 阅读 · 0 评论 -
vue-loader的使用
前面的话最近通过 《深入浅出webpack》学习webpack的使用,由于这本书编写的时候webpack还是3的版本,但现在webpack以及升级到4了,有些插件以及废弃了,又或者需要配合其他插件使用,这里将学习过程中遇到的问题记录下来。vue-loader的使用vue-loader的作用是解析和转换.vue文件,提取出其中的逻辑代码script,样式代码style以及HTML模板tem...原创 2019-11-18 19:31:02 · 2572 阅读 · 0 评论 -
webpack入门
前面的话现在团队开发基本会采用“模块化 + 新语言 + 新框架”的模式进行开发,webpack成为构建工具的首选。什么是webpack?webpack 是一个打包模块化JavaScript的工具,在webpack里面一切皆为模块,例如一个js文件、css文件,图片、模板等。webpack将这些相互有依赖的模块,打包成一个供浏览器能使用的静态资源(一个js文件)。webpack5大特点...原创 2019-11-10 12:29:35 · 209 阅读 · 0 评论 -
webpack 搭建Vue环境
前面的话这篇文章将介绍如何使用webpack搭建Vue环境初始化项目先创建一个根目录:基于webpack搭建Vue环境(这里便于查找中文命名)在根目录下,命令行中敲入如下命令: npm install - y会生成一个 包含默认信息的 package.json 文件 。然后我们在项目文件夹中创建以下几个文件夹:distsrc、src/componentsbuild其中,...原创 2019-07-16 11:25:16 · 438 阅读 · 0 评论 -
webpack的理解
前面的话webpack 是一个模块打包器(module bundler),处理模块间的依赖关系,并进行打包。webpack基本功能1、依赖管理:方便引用第三方模块,让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块2、合并代码:把各个分散的模块集中打包成大文件,减少HTTP的链接的请求次数,配合uglify.js可以减少、优化代码的体积3、各种插件:babel把......原创 2019-07-15 19:52:57 · 839 阅读 · 0 评论