webpack
qq20004604
前阿里巴巴,高级前端开发
展开
-
手把手教你webpack3(1)最简单的webpack实例
0、前注本文内容源于webpack中文文档,以及我自己实践中写的若干DEMO。每个DEMO以文件夹为单位,从入门到进阶,根据文件夹编号为准,逐步递进。成文时,webpack版本是【3.8.1】0.1、安装webpack首先你需要安装Node.js,点击打开Node.js下载页面。安装完Node.js后,会自带npm包管理器。 npm install webpack -g这个命令将安装最新版本的原创 2017-11-29 09:00:15 · 876 阅读 · 0 评论 -
手把手教你webpack3(9)File-Loader配置简述
FILE-LOADER配置简述前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO地址1、概述简单来说,file-loader 就是将文件(由于一般是图片文件为主,所以下面通常使用图片两字作为替代,方便理解。其他的包括字体文件等),在进行一些处理后(主要是处理文件名和路径),移动打包后的目录中。处理的内容包括原创 2017-12-12 20:41:56 · 3411 阅读 · 0 评论 -
手把手教你webpack3(8)url-Loader配置简述
URL-LOADER配置简述前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO地址1、概述简单来说,url-loader的效果类似file-loader。 优点:可以将css文件中的图片链接,转为base64字符串,或移动到打包后文件夹; 缺点:可配置性比file-loader弱一些,但其实fi原创 2017-12-07 21:20:25 · 3622 阅读 · 0 评论 -
手把手教你webpack3(7)style-loader详细使用说明
STYLE-LOADER详细使用说明前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO地址1、概述简单来说,style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。对于简单项目,打包然后插入也就足够了,但是遇见复杂情况,例如:需要使用webpack原创 2017-12-05 17:35:23 · 3744 阅读 · 0 评论 -
教你怎么使用 webpack3 的 HMR 模块热加载
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。点击这里查看DEMO7、模块热加载 HMR7.0、使用说明安装:npm install运行(注意,是 dev):npm run dev结论放前面,适合场景:当使用 style-loader 时,修改 css 样式;当使用 vue-loader 之类带 HMR 功原创 2017-12-26 09:56:03 · 809 阅读 · 0 评论 -
webpack3实战(5)打包一个多页、jQuery、图片转base64、压缩混淆、异步模块加载的项目
基本需求:1. 引入jQuery(或其他类似库,之所以用 ``jQuery`` 是每个前端开发者都理应会 jQuery);2. 使用 ``less`` 作为 ``css`` 预处理器;3. 标准模块化开发;4. 有异步加载的模块;5. 使用 es6、es7 语法;6. 写一个登录页面作为DEMO,再写一个登录后的示例页面作为跳转后页面;7. 可适用于多页项目;8. css 文件与 图片 文件脱离(即原创 2017-12-19 09:04:36 · 1986 阅读 · 0 评论 -
手把手教你webpack3(12)VUE-LOADER配置简述
VUE-LOADER配置简述前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO地址0、使用说明首先你得会用 Vue.js,不然可能对本文部分内容无法理解安装:npm install运行:// 开发模式(推荐使用这个)npm run dev// 普通原创 2018-01-15 00:48:15 · 3942 阅读 · 0 评论 -
手把手教你webpack3(13)开发环境
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。6、开发环境6.0、使用说明安装:npm install运行:npm run test有三种,依次介绍。6.1、观察模式 watch关键字:修改文件后自动编译,需要刷新浏览器后才能查看到新编译好的文件。原创 2018-01-15 00:53:50 · 555 阅读 · 0 评论 -
手把手教你webpack3(14)HMR模块热加载
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。点击这里查看DEMO7、模块热加载 HMR7.0、使用说明安装:npm install如果需要单独安装,请查看6、开发环境中的 6.2、实时重新加载 webpack-dev-server运行(注意,是 dev):原创 2018-01-15 00:54:40 · 1927 阅读 · 0 评论 -
手把手教你webpack3(11)PostCSS-Loader配置简述
POSTCSS-LOADER配置简述前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO地址1、概述postcss-loader 用于处理css代码,具有下列特点:通常由 options 和 plugins 两部分组成,plugins 虽然嵌套在 options 里,但实际上是通过其他插件生效的;配置是可原创 2017-12-12 20:45:16 · 11325 阅读 · 0 评论 -
手把手教你webpack3(10)Less-Loader配置简述
LESS-LOADER配置简述前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO地址1、概述less-loader 用于处理编译 .less 文件,将其转为 css文件代码。使用 less-loader 的话,必须安装 less,单独一个 less-loader 是没办法正常使用的。 安装npm in原创 2017-12-12 20:43:38 · 9531 阅读 · 0 评论 -
手把手教你webpack3(6)css-loader详细使用说明
CSS-LOADER配置详解前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。1、概述对于一般的css文件,我们需要动用三个loader(是不是觉得好麻烦);1、css-loader:先附上官网文档(中文)的链接:css-loader文档。不过说实话,这个官方文档讲的很糟糕,看的人一脸懵逼。css-loader主要原创 2017-12-01 17:37:44 · 3888 阅读 · 0 评论 -
手把手教你webpack3(3)入口(多入口)entry
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。3、入口(多入口)示例目录在上面的webpack.config.js中,有如下代码:// 入口文件,指向app.jsentry: './app.js',以上代码相当于:entry: { main: './app.js'}如果是普通的项目(单入口),那么按原创 2017-11-29 09:06:42 · 3633 阅读 · 0 评论 -
手把手教你webpack3(2)简单指令(npm脚本)
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。2、简单指令(npm脚本)示例目录我们实际开发中,一般都是使用npm run build或者npm run dev之类的指令,这是怎么实现的呢?答案是利用package.json里面的scripts属性。其他文件如【1】中的四个文件,新增一个package.json原创 2017-11-29 09:04:46 · 619 阅读 · 0 评论 -
手把手教你webpack3(4)出口(详解)
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。4、出口示例目录4.1、标准的出口写法// 出口文件output: { filename: './dist/dist.js'}意思是,将打包好的文件,打包到dist文件夹下的dist.js。注:大家一般将打包好的文件会放在dist文件夹下,方便管理。4.原创 2017-11-29 09:10:20 · 1007 阅读 · 1 评论 -
webpack3实战(1)打包一个CDN引入的jQuery项目
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。实战项目示例目录1、需求列表1、在html文件里,通过CDN引入了jQuery;2、步骤安装依赖npm installhtml文件中引入了jQueryindex.html<script src="https://cdn.bootcss.com/jquery/3.2.原创 2017-11-29 09:18:23 · 4466 阅读 · 0 评论 -
webpack3实战(2)打包一个bootstrap项目(打包文件带hash)
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。实战项目示例目录1、需求列表1、html文件引入了一些外部资源;2、html文件里有一些写好的内容(比如html);3、打包好的js文件加 chunk ,用于解决缓存问题;2、步骤安装依赖npm installhtml模板(有需要可以自行编辑):demo.html执原创 2017-11-29 09:21:16 · 2671 阅读 · 0 评论 -
webpack3实战(3)打包有es6、es7语法的js代码
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。实战项目示例目录1、需求列表1、html文件引入的js文件,需要使用es6、es7的语法;2、使用的语法里,除了常规的es6语法外,还包括例如Promise、async等特殊特性,要求可以转换。注:babel默认只转js语法,而不转换新的API,例如Iterator原创 2017-11-29 09:24:52 · 2128 阅读 · 0 评论 -
webpack3实战(4)打包带异步加载功能的模块
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。实战项目示例目录1、需求列表1、有模块A、B两个;2、A组件默认加载,B组件在符合某种条件下加载(例如延迟1秒后再加载);3、显然我需要打包其为2个文件;2、步骤安装依赖npm install执行打包命令:npm run test查看打包后效果:dist/index原创 2017-11-29 09:28:13 · 933 阅读 · 0 评论 -
手把手教你webpack3(5)babel-loader详细使用说明
前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。5.1、babel-loader这个用于将使用ES6规范的js代码,转为ES5。首先安装一大堆东西,参照下面的命令,一共是4个(包括webpack)npm install --save babel-loader babel-core babel-preset-env原创 2017-12-01 17:35:33 · 2492 阅读 · 1 评论 -
手把手教你webpack3(15)插件之雪碧图插件(WEBPACK-SPRITESMITH配置简述)
WEBPACK-SPRITESMITH配置简述前注:文档全文请查看 根目录的文档说明。如果可以,请给本项目加【Star】和【Fork】持续关注。有疑义请点击这里,发【Issues】。DEMO0、使用说明安装:npm install运行:// 开发模式(推荐使用这个)npm run dev// 打包到dist目录npm run build单独安原创 2018-01-15 00:55:47 · 4505 阅读 · 0 评论