话题
文章列表
程柳锋 构建工具
导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins,它可以改变、压缩和优化各种各样的文件。它的输入是不同的资源,比如:js、css、图片、字体和html文件等等,然后将它们输出成浏览器可以正常解析的文件。 当下最流行的模块打包器 webpack 于2018年2月25日正式发布v4.0.0版本,代号legato。从官方的 发布日志 [https://github.com/webpack/webpack/releases/tag/v4.0.0] 来看, 本次大版本更新带来了很多新特性更新和改善,这将会让webpack的配置更加简单。本文,笔者将会全面介绍webpack4的新特性及实践。 环境支持 在发布日志里的 Big changes 板块,官方宣布不在支持Node 4, Node 6 [https://nodejs.org/en/blog/release/v6.0.0/] 使用的是v8 5.0版本,支持93%的ES6语法。不难看出,这个决定是为了更好的利用ES6语法的优势,来编写出更加整洁和健壮的代码。 ...显示全部
25 天前发表 125次浏览 0条评论 0次收藏
杨磊 构建工具
webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢? WEBPACK的配置 const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array// Webpack打包的入口 output: { // 定义webpack如何输出的选项 path: path.resolve(__dirname, "dist"), // string// 所有输出文件的目标路径 filename: "[chunkhash].js", // string// 「入口(entry chunk)」文件命名模版 publicPath: "/assets/", // string// 构建文件的输出目录/* 其它高级配置 */ }, module: { // 模块相关配置 rules: [ // 配置模块loaders,解析规则 ...显示全部
1 个月前发表 127次浏览 0条评论 0次收藏
qcyhust 构建工具
PARCEL——开始前端开发零配置体验 导语: 前端开发在开启一个新的项目时总是有个绕不开的环节,那就是项目的开发配置。几年前,我们还在用grant或是gulp来定义一系列的task构建项目开发流程,再往后webpack的出现开始有了广泛的模块概念,利用各种loader或是plugin处理各个前端模块。当然,无论是gulp还是webpack,都需要编写相对应的配置文件来定制开发过程中需要的功能。业务之外的工作量总是催生人性的懒惰,这样一个打着 极速零配置 名号出现的web打包工具就很抓人眼球。这里利用 官网 [https://parceljs.org/] 的项目扩展,看看pacel的工作流程。[http://7tszky.com1.z0.glb.clouddn.com/FmemZsdC5jizPKeEX83joTmOFkt4] 项目结构 为了测试代码拆分功能,新建了一个简单的项目,结构如下: parcel └───src └─── index.html │─── index.js │─── main.js │─── handle.js ...显示全部
3 个月前发表 1685次浏览 0条评论 0次收藏
qcyhust 构建工具
利用YEOMAN构建项目GENERATOR 导语 在一个项目的初始化阶段我们一般会做什么呢?如果有一个可参考的项目,是不是会复制这个项目,然后修改成新项目?如果是要在项目中增加一个新页面或是新组件,在开始的时候是不是会复制粘贴先前已存在的页面、组件代码。这些初始化时复制粘贴的操作意味着我们即将着手的项目有大量的结构代码(比如构建脚本,开发脚手架)是存在共性的,在开发过程中,新建一个页面,新开发一个组件,甚至新写一个路由都可能利用一个相同结构的代码来往里面填写新的内容。那么一个能帮助开发者生成自定制结构文件的小工具就会在这中使用场景下派上用场,它能让开发者的工作焦点回到真正的业务逻辑开发上,同时也能为团队开发体统一份统一的代码规范。 图片描述 [http://7tszky.com1.z0.glb.clouddn.com/FngyRfzVRSaC_AvkVlLoK-_3hx7I] 简介 yeoman [http://yeoman.io/] 是一个可以帮助开发者快速开启一个新项目的工具集。yoeman提出一个yeoman工作流的概念,通过脚手架工具(yo),构建工具(grunt ...显示全部
8 个月前发表 362次浏览 0条评论 0次收藏
袁飞翔 构建工具
部分插件 * fis3-hook-lego [https://github.com/imweb/fis3-hook-lego] 查找文件 * fis3-hook-annotation [https://github.com/imweb/fis3-hook-annotation] 文件注解 TIP 1、勿使用LEGO_MODULES文件全路径 <scriptsrc="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <scriptsrc="zepto"></script> js require: // js/** * @require "zepto" */ 2、不需要被DEFINE包裹的文件使用 @NOWRAP 文件注解标示 /** * @noWrap */// ..file code 3、默认不对LEGO_MUDLES下的文件做BABEL,特殊文件需要使用 @ES6 标示 /** * @es6 */// ..file code 4、不需要加HASH的图片放置 */IMG/NOHASH/ 目录下 ...显示全部
2 年前发表 2537次浏览 3条评论 1次收藏
袁飞翔 构建工具
首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/common/utils', { isMod: true, moduleId: 'utils'// 为utils设置一个moduleId,希望以后能直接require('utils') }) .match('::package', { postpackager: [ fis.plugin('loader', { resourceType: 'commonJs' }) ] }) <!-- main.html --><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><!-- etc.. ---><script>require('utils') ...显示全部
2 年前发表 2758次浏览 3条评论 0次收藏
袁飞翔 构建工具
先是环境:在windows上用VMware安装了ubuntu,用ubuntu运行终端。可以用VMware文件共享、网络文件共享、nginx、ftp实现两个操作系统的文件共享 linux主目录配置文件保存在github: https://github.com/feix760/yuan [https://github.com/feix760/yuan] 如果换一台电脑,我只需要git clone --recursive myGithubPath 就可以拿到以前的配置文件 vim的插件可以用 Bundle [https://github.com/gmarik/Vundle.vim] 来管理,只要在.vimrc用 Plugin 'XXX' 指明需要的插件,随后用 :PluginInstall 自动安装新插件 下面是我的 .vimrc [https://github.com/feix760/yuan/blob/master/.vimrc] 插件配置的部分,随后介绍各个插件的用途 set nocompatible filetype off ...显示全部
3 年前发表 2602次浏览 2条评论 0次收藏