webpack
诸葛胖虎
这个作者很懒,什么都没留下…
展开
-
Webpack入门(一)——基本流程
1. 核心 ① 入口(entry) ② 输出(output) ③ loader ④ 插件(plugins) 2. 优势 ① 模块化开发(import,require) ② 预处理(Less,Sass,ES6,TypeScript……) ③ 主流框架脚手架支持(Vue,React,Angular) ④ 庞大的社区(资源丰富,降低学习成本) 准备工作 1. 安装node.js 2. 新建项目 创建目录...原创 2019-08-24 14:29:52 · 134 阅读 · 0 评论 -
Webpack入门(二)——CSS打包
一、JS模块化 我们在scripts目录下添加一个module.js文件,目录结构如下: 并写入以下代码 // module.js var text = 'Hello Webpack!'; module.exports = { // CommonJS规范中模块输出语法 text: text }; 然后在index.js中引入module.js文件 // index.js var ...原创 2019-08-24 15:01:49 · 226 阅读 · 0 评论 -
Webpack入门(三)——图片打包
我们知道,在Webpack中,js文件类型是能够被识别并直接打包的,而其他文件类型(如CSS和图片等)则需要通过特定的loader来进行加载打包。 上一节我们讲到如何使用css-loader和style-loader两个loader来打包CSS代码,这次我将继续讲解如何使用loader将图片类型文件进行打包处理。 一、上节回顾 为了让大家思路更加明朗,我还是先将上一节结束时的目录结构和一些关键文件...原创 2019-08-24 15:23:02 · 337 阅读 · 0 评论 -
Webpack入门(四)——HTML打包
到目前为止,有关Webpack最基础的内容差不多已经讲完了,其中包括Webpack运行的基本流程、CSS的打包和图片的打包,也就是说,当你掌握这几节之后,基本上就能像以前不用Webpack时一样愉快地写代码了。 当然,我们其实还有很多需要优化的地方,就比如本文所要讲到的,如何将HTML进行打包? 在之前的实例中,Webpack虽然能够正常地将各种页面所需要的资源从src目录打包至dist目录,但是...原创 2019-08-24 15:32:02 · 212 阅读 · 0 评论