零零水
TA的个人档案
零零水个人页面-阿里云开发者社区
文章
234
问答
0
个人介绍
主攻JS
擅长的技术
- 高分内容
- 最新动态
- 文章
- 问答
-
发表了文章 2017-12-19
webpack3实战（5）打包一个多页、jQuery、图片转base64、压缩混淆、异步模块加载的项目
前注： 文档全文请查看 根目录的文档说明。 如果可以，请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里，发【Issues】。 实战项目示例目录 0、使用说明 安装： npm install 运行（注，这里不像之前用的 test ，而是改用了 build）： npm run build 1、需求列表 基本需求： 引入jQuery（或其他类似库，之所以用 jQuery 是每个前端开发者都理应会 jQuery）； 使用 less 作为 css 预处理器； 标准模块化开发； 有异步加载的模块； 使用 es6、es7 语法； 写一个登录页面作为DEMO，再写一个登录后的示例页面作为跳转后页面； 可适用于多页项目； css 文件与 图片 文件脱离（即更改 css 文件路径不影响其对图片的引用） 打包要求： 启用 hash 命名，以应对缓存问题； css 自动添加兼容性前缀； 将图片统一放到同一个文件夹下，方便管理； 将共同引入的模块单独打包出来，用于缓存，减少每次重复加载的代码量； 代码进行丑化压缩； 2、涉及到的知识 入口：设置入口文件； 出口：设置打包后的文件夹以及文件命名； babel-loader：用于将es6、es7等语法，转换为es5语法； css-loader：用于处理css文件（主要是处理图片的url）； style-loader：将转换后的css文件以 style 标签形式插入 html 中； postcss-loader：一般用于添加兼容性属性前缀； less-loader：以 less 语法来写 css ； url-loader：用于将图片小于一定大小的文件，转为 base64 字符串； file-loader：url-loader 不能转换 base64字符串 的文件，被这个处理（主要用于设置打包后图片路径，以及CDN等）； html-withimg-loader：用于加载html模板； html-webpack-plugin ：用于将已有 html 文件作为模板，生成打包后的 html 文件； clean-webpack-plugin：用于每次打包前清理dist文件夹 CommonsChunkPlugin：提取 chunks 之间共享的通用模块 3、技术难点 3.1、多页面 多页模式是一个难点。 且不考虑共同模块（这里主要指的是html模板，而不是js的模块），光是单独每个入口 js 文件需要搭配一个相对应的 html 文件，就已经是一件很麻烦的事情了。 对于这个问题，需要借助使用 html-webpack-plugin 来实现。 由于之前木有 html-webpack-plugin 的相关内容，这里只讲思路和代码。 第一：多入口则多个html文件 也是核心内容，html-webpack-plugin 只负责生成一个 html 文件。 而多入口显然需要生成多个 html 文件，因此 有多少个入口，就需要在 webpack 的 plugins 里添加多少个 html-webpack-plugin 的实例。 同时，我们还要更改 webpack 的 entry 入口，entry 的值应该是根据入口数量自动生成的对象。 第二：chunks特性实现按需加载 通过配置 html-webpack-plugin 的 options.chunks ，可以让我们实现让 login.html 只加载 login/index.js，而 userInfo.html 只加载 userInfo/index.js（注：由于以 entry 的 key 作为寻找出口文件的根据，因此打包后带 hash 的文件名不影响匹配）； 注意，这个实现的机制，是通过 options.chunk 的值，去匹配 webpack.config.js的 entry 对象的 key。 因为一个入口文件对应一个出口文件，所以这里会去拿入口文件对应的出口文件，将其加到 html 文件里。 第三：template自定义作为模板的 html 文件 options.template 可以自定义该实例以哪个 html 文件作为模板。 第四：filename options.filename 可以自定义生成的 html 文件输出为什么样的文件名。 第五：管理多入口 已知： 一个 html-webpack-plugin 实例具有以下功能： 生成一个 html 文件（一）； 决定自己引入哪个 js 文件（二）（记得，webpack只负责打包js文件，不负责生成 html 文件。生成实例是依靠这个 plugins）； 决定自己以哪个 html 文件作为模板（三）； 决定自己打包后的目录和文件名（四）； 我们通过webpack打包后，一个入口 js 文件会对应一个出口 js 文件； 而每个入口 js 文件，都对应一个 html 模板文件； 因此每个 html 模板文件，都知道自己对应哪个出口 js 文件； 所以以上是实现多入口的原理。 代码： 多入口管理文件： config/entry.json [ { "url": "login", "title": "登录" }, { "url": "userInfo", "title": "用户详细信息" } ] webpack配置文件： webpack.config.js： 首先，配置 entry： const entryJSON = require('../config/entry.json'); // 入口管理 let entry = {} entryJSON.map(page => { entry[page.url] = path.resolve(__dirname, `../src/page/${page.url}/index.js`) }) 其次，配置 plugins： // 在上面已经引用了 entryJSON const path = require('path') // 因为多入口，所以要多个HtmlWebpackPlugin，每个只能管一个入口 let plugins = entryJSON.map(page => { return new HtmlWebpackPlugin({ filename: path.resolve(__dirname, `../dist/${page.url}.html`), template: path.resolve(__dirname, `../src/page/${page.url}/index.html`), chunks: [page.url], // 实现多入口的核心，决定自己加载哪个js文件，这里的 page.url 指的是 entry 对象的 key 所对应的入口打包出来的js文件 hash: true, // 为静态资源生成hash值 minify: false, // 压缩，如果启用这个的话，需要使用html-minifier，不然会直接报错 xhtml: true, // 自闭标签 }) }) 最后，webpack 本身的配置： module.exports = { // 入口文件 entry: entry, // 出口文件 output: { path: __dirname + '/../dist', // 文件名，将打包好的导出为bundle.js filename: '[name].[hash:8].js' }, // 省略中间的配置 // 将插件添加到webpack中 plugins: plugins } 文件目录（已省略无关文件）： ├─build │ └─webpack.config.js ├─dist └─src └─page ├─login │ ├─index.js │ ├─index.html │ └─login.less └─userInfo ├─index.js └─index.html 3.2、文件分类管理 如何将页面整齐的分类，也是很重要的。不合理的规划，会增加项目的维护难度。 项目目录如下分类： ├─build webpack 的配置文件，例如 webpack.config.js ├─config 跟 webpack 有关的配置文件，例如 postcss-loader 的配置文件，以及多入口管理文件 ├─dist 打包的目标文件夹，存放 html 文件 │ └─img 打包后的图片文件夹 └─src 资源文件夹 ├─common 全局配置，或者公共方法，放在此文件夹，例如 less-loader 的全局变量 ├─img 图片资源文件夹，这些是共用的图片 ├─less less 文件夹，共用的less文件 ├─page 每个页面，在page里会有一个文件夹，里面放置入口 js 文件，源 html 文件，以及不会被复用的 html template文件。 ├─template html 模板文件夹（通过js引入模板，这里的可能被复用） └─static 静态资源文件夹，这里放使用静态路径的资源 虽然还不够精细，但应对小型项目是足够了的。 3.3、别名 别名的优势很多，比如： 1、css/less 代码，可以和图片分离： 只要 webpack 配置和图片的位置不变。 那么使用别名，就可以随意移动 less 文件。 不必担心因为移动 less 文件，而造成的 less 文件与 图片 文件的相对路径改变，导致找不到图片而出错。 2、方便整体移动图片 假如原本图片放在src/img文件夹下，现在你突然想把图片放在src/image文件夹下。 如果不使用别名，你需要一个一个去修改图片的路径； 而使用别名，只需要改一下别名的路径就行了。 css-loader 支持独立于 webpack 的别名的设置，教程参照：css-loader 这里基于【3.2】的文件分类管理，附上关于别名的控制代码： { loader: 'css-loader', options: { root: path.resolve(__dirname, '../src/static'), // url里，以 / 开头的路径，去找src/static文件夹 minimize: true, // 压缩css代码 // sourceMap: true, // sourceMap，默认关闭 alias: { '@': path.resolve(__dirname, '../src/img') // '~@/logo.png' 这种写法，会去找src/img/logo.png这个文件 } } }, 其余代码已省略，如果有需要，请查看 DEMO 中的 build/webpack.config.js 文件。 3.4、安装jQuery 方案： 由于npm上并没有最新的 jQuery，目前来说， 1.7.4 是最新的版本。 所以可以从下面这个CDN直接下载 jQuery 来使用，版本是 1.12.4 https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js 然后在js文件的开始位置，通过require引入（注意，不能通过 import 引入） const $ = require('../../common/jquery.min') webpack会帮你做剩下的事情，你只需要愉快的使用 jQuery 就好了。 3.5、提取 chunks 之间共享的通用模块 在 3.4 中，我们引入了 jQeury，方法简单易行，但又一个缺点，那就是会导致代码重复打包的问题。 即 jQuery 会被打包进每一个引入他的入口 js 文件中，每个页面都需要重复下载一份将jQuery代码打包到其中的 js 文件（很可能两个 js 文件只有 20kb 是自己的代码，却有 90kb 是 jQuery 代码）。 我们期望： 访问第一个页面时，预期加载 foo.js 和 jQuery.js； 访问第二个页面时，预期加载 bar.js 和 jQuery.js； 当访问第二个页面时，发现已经在第一个页面下载过 jQuery.js 了，因此将不需要再下载 jQuery 代码，只需要下载 bar.js 就可以了； 方案改进： 为了实现这个目标，毫无疑问，我们需要将 jQuery.js 文件单独打包，或者说，每一个在多个模块中共享的模块，都会被单独打包。 有几种做法，但实测后都不好用，鉴于 jQuery 会在每个页面都适用，因此综合考虑后，我采用以下方案来初步实现我的目标。 最后我采用了 webpack 自带的插件：webpack.optimize.CommonsChunkPlugin来实现，他可以将在多个文件中引入的 模块，单独打包。 关于这个插件可以先参考官方文档：[CommonsChunkPlugin: 提取 chunks 之间共享的通用模块](https://doc.webpack-china.org/plugins/commons-chunk-plugin/)。 为了实现我们的目的，我们需要做两件事： 1、使用这个插件，如下配置： const webpack = require('webpack') new webpack.optimize.CommonsChunkPlugin({ name: "foo", // 这个对应的是 entry 的 key minChunks: 2 }) 这个的效果是将至少有 2 个 chunk 引入的公共代码，打包到 foo 这个 chunk 中。 2、我们需要引入这个打包后的 chunk ，方法是通过 html-webpack-plugin 这个插件引入。 // 无关配置已经省略 new HtmlWebpackPlugin({ chunks: [page.url, 'foo'], // 这里的foo，就是通过CommonsChunkPlugin生成的chunk }) 无需修改源代码，此时我们可以执行npm run build查看打包后的效果： foo.d78e8f4193f50cc42a49.js // 199 KB（这里包含jQuery以及公共代码） login.d2819f642c5927565e7b.js // 15 KB userInfo.1610748fb3346bcd0c47.js // 4 KB 0.fe5c2c427675e10b0d3a.js // 2 KB 注： 如果页面很多的话，那么很可能某些公共组建被大量chunk所共享，而某些chunk又被少量chunk所共享。 因此可能需要特殊配置 minChunks 这个属性，具体请查看官方文档。 3.6、每次打包前，清理dist文件夹 需要借助 clean-webpack-plugin 这个插件。 使用这个插件后，可以在每次打包前清理掉整个文件夹。 基于本项目来说，清除的时候配置的时候需要这样配置： new CleanWebpackPlugin(path.resolve(__dirname, '../dist'), { root: path.resolve(__dirname, '../'), // 设置root verbose: true }) 原因在于，这个插件会认为webpack.config.js所在的目录为项目的根目录。 只使用第一个参数的话，会报错移除目标的目录位置不对： clean-webpack-plugin: （略）【实战５】打包一个具有常见功能的多页项目\dist is outside of the project root. Skipping... 而添加了第二个参数的设置后，就可以正常使用了。 注： 他的效果是直接删除文件夹，因此千万别写错目录了，如果删除了你正常的文件夹，那么……就只能哭啦。 3.7、使用 html 模板 由于我们很可能在 html 中使用 <img> 标签， 而 html-webpack-plugin 这个插件，只能用于将某个 html 文件作为打包后的源 html 文件， 不会将其 <img> 标签中的 src属性转为打包后的图片路径，同时也不会将引入的图片进行打包。 因此我们需要将 html 内容单独拆出来，page 文件夹里的源文件只负责作为 html 模板而已。 为了使用 html 模板，我们需要专门引入一个插件： html-withimg-loader：用于解析 html 文件。 使用方法很简单： 配置loader（参照 webpack.config.js）； import 导入 html 模板文件（例如 login.html）； 导入的时候，是一个字符串，并且图片的 url 已经被解析了。然后我们将其引入源 html 文件中（比如page/login.html），再写各种逻辑就行了。 注： 务必记得先把 html 模板插入页面中，再写他的相关逻辑。 3.8、代码的丑化压缩 使用插件 UglifyjsWebpackPlugin ，文档参照 (UglifyjsWebpackPlugin)[https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin] 压缩前： 0.fe5c2c427675e10b0d3a.js // 2 KB foo.a5e497953a435f418876.js // 199 KB login.9698d39e5b8f6c381649.js // 15 KB userInfo.f5a705ffcb43780bb3d6.js // 4 KB 丑化压缩后： 0.fe5c2c427675e10b0d3a.js // 1 KB foo.a5e497953a435f418876.js // 120 KB login.9698d39e5b8f6c381649.js // 10 KB userInfo.f5a705ffcb43780bb3d6.js // 2 KB 4、分析 重新列出所有需求： 基本需求： 引入jQuery（或其他类似库，之所以用 jQuery 是每个前端开发者都理应会 jQuery）； 使用 less 作为 css 预处理器； 标准模块化开发； 有异步加载的模块； 使用 es6、es7 语法； 写一个登录页面作为DEMO，再写一个登录后的示例页面作为跳转后页面； 可适用于多页项目； css 文件与 图片 文件脱离（即更改 css 文件路径不影响其对图片的引用） 打包要求： 启用 hash 命名，以应对缓存问题； css 自动添加兼容性前缀； 将图片统一放到同一个文件夹下，方便管理； 将共同引入的模块单独打包出来，用于缓存，减少每次重复加载的代码量； 代码进行丑化压缩； 需求的实现： 基本需求： 需求的实现过程 需求 实现方法 引入jQuery 1. 通过 require() 引入，并通过 CommonsChunkPlugin 实现单独打包； 使用 less 作为 css 预处理器 1. 使用 less-loader 来处理 .less 文件； 标准模块化开发 1. 使用 import 和 require 语法来进行模块化开发； 有异步加载的模块 1. 通过 require([], callback) 来实现模块的异步加载 使用 es6、es7 语法 1. 使用 babel 来转义 写一个登录页面作为DEMO，再写一个登录后的示例页面作为跳转后页面 1. 登录页：page/login2. 跳转后页面：page/userInfo 可适用于多页项目 1. config/entry.json 用于配置多页入口；2. html-withimg-loader 来生成多页模板；3. 最后在webpack.config.js里配置 entry 和 plugins css 文件与 图片 文件脱离（即更改 css 文件路径不影响其对图片的引用） 通过 css-loader 的别名实现 打包需求： 需求的实现过程 需求 实现方法 启用 hash 命名，以应对缓存问题 配置 output 的 filename 属性，加 [chunkhash] 即可 css 自动添加兼容性前缀 使用 post-loader 的 autoprefixer 将图片统一放到同一个文件夹下，方便管理 配置 url-loader （实质是 file-loader ）的 outputPath 将共同引入的模块单独打包出来，用于缓存，减少每次重复加载的代码量 使用插件 CommonsChunkPlugin 来实现 代码进行丑化压缩 使用插件 UglifyjsWebpackPlugin 来实现
-
发表了文章 2017-12-12
手把手教你webpack3（11）PostCSS-Loader配置简述
POSTCSS-LOADER配置简述 前注： 文档全文请查看 根目录的文档说明。 如果可以，请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里，发【Issues】。 DEMO地址 1、概述 postcss-loader 用于处理css代码，具有下列特点： 通常由 options 和 plugins 两部分组成，plugins 虽然嵌套在 options 里，但实际上是通过其他插件生效的； 配置是可以独立的（每个配置的插件也是独立的）。详细介绍阅读【2.1】； 还有一些自定义配置，但由于篇幅所限，这里就不像之前那样详解每个配置了（主要是很多都依赖于其他东西）。 只写一些常用功能。 2、配置 2.1、独立配置 所谓独立配置，指的是在js文件中，引入的css文件如何被postcss-loader解析，取决于和他最近的那一个postcss的设置文件。 注： 对在css文件中，通过@import导入的css文件无效： 必须是通过通过import引入到js里面的css文件，才会被postcss-loader解析生效； 如果是a.css，通过@import './b.css'引入b.css文件，那么该配置对a.css生效，对b.css无效； 我查了很多资料，目前没找到能让postcss-loader对在css文件中，通过@import方式导入其他的css文件，进行生效的方法。如果有，请提 issues 给我。 优先级： 在 webpack.config.js 中的module.rules属性里设置的优先级最高； 然后按顺序找，离css文件最近的postcss.config.js配置文件，遇见的第一个文件其次； 按顺序找的后面的文件优先级最低； 找不到配置会报错； 注（完） 先假设 webpack.config.js 里配置方式如下（无任何特殊配置）： // ...略略略 { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] } // ...略略略 简单来说，postcss-loader 的配置文件名为：postcss.config.js。 假设文件树结构如下： . |____app.js |____webpack.config.js |____index.html |____postcss.config.js // 1#设置文件 |____style | |____postcss.config.js // 2#设置文件 | |____style.css |____style2 | |____bar.css | |____postcss.config.js // 3#设置文件 引用（import）结构是： app.js -> style/style.css app.js -> style2/bar.css 假如两个css文件都有一条css属性：box-sizing: border-box;； 然后 style/postcss.config.js （2#)的设置如下（兼容性配置）： module.exports = { plugins: [ require('autoprefixer')({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 0.01%" ] }) ] } style2/postcss.config.js (3#)的设置如下（默认配置）： module.exports = {} 经过postcss-loader的处理之后，有兼容性配置的css文件，其插入html文件后，css属性变为如下： -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 无兼容性配置的css文件，其插入html文件后，css属性变为如下： box-sizing: border-box; 说明一点，对于postcss-loader来说，他优先取同目录下的postcss.config.js的配置属性。 另外，由于2#和3#设置文件的存在，因此无论1#如何设置，都不会影响其效果。 假如css文件找不到同目录下的postcss.config.js文件，那么会依次往上级目录寻找，直到找到，或者抵达项目根目录为止（以上面这个目录结构为例，即webpack.config.js所在目录是根目录） 2.2、自定义配置文件路径 名称 类型 默认值 描述 config {Object} undefined Set postcss.config.js config path && ctx 在上面，我们写了postcss-loader的配置文件的使用方式，分别是：【写在webpack.config.js中】，【配置文件放在对应的css文件的同级目录或者上级目录】。 但是假如我们需要统一管理 postcss-loader 的配置文件，那么就需要通过 config 来处理。 示例代码如下： { loader: 'postcss-loader', options: { config: { path: './config' // 写到目录即可，文件名强制要求是postcss.config.js } } } 表示会去 webpack.config.js 的同目录下去找文件夹 config，然后在该文件夹下找到 postcss.config.js 文件（文件名不能改变），从而读取配置。 假如这么写，会导致【放在对应的css文件，的同级目录或者上级目录，的postcss-loader的配置文件失效】。原因是优先级问题。 除此之外，还有一个context设置，略略略。 2.3、sourceMap 测试后，无效（开启与否文件大小不变） 3、插件 除了 autoprefixer 用于加兼容性前缀，其他基本都有更好的，比如stylelint不如用eslint系列替代。 3.1、autoprefixer 这个是最应该添加的插件了。 效果是对css文件添加兼容性前缀。 安装： npm install autoprefixer --save 官方github地址： https://github.com/postcss/autoprefixer 使用方式： // postcss.config.js let autoprefixer = require('autoprefixer'); module.exports = { plugins: [ autoprefixer({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 0.01%" ] }) ] } 效果： 应该是兼容性最强的配置方法了，例如box-sizing可以添加两个前缀，有些特性可以添加三个前缀，如下： 转换前 transform: rotate(0deg); 转换后： -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); 名称 类型 默认值 描述 其他特性： 不仅可以添加前缀，也可以删除旧前缀（过时前缀）等。详细查看官方文档。 非特殊要求，直接使用上面这个配置就行了（如果不需要最多的前缀，可以把上面的改为 autoprefixer({ browsers: [ // 加这个后可以出现额外的兼容性前缀 "> 1%" ] }) 3、参考文章 PostCSS配置指北
-
发表了文章 2017-12-12
手把手教你webpack3（10）Less-Loader配置简述
LESS-LOADER配置简述 前注： 文档全文请查看 根目录的文档说明。 如果可以，请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里，发【Issues】。 DEMO地址 1、概述 less-loader 用于处理编译 .less 文件，将其转为 css文件代码。 使用 less-loader 的话，必须安装 less，单独一个 less-loader 是没办法正常使用的。 安装 npm install --save less-loader less 2、配置 2.1、无任何配置 less-loader 不使用任何配置的时候，也可以正常使用。但需要配合 style-loader 和 css-loader 一起。 示例配置（其他略，参照github上的示例DEMO）： { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } less文件： @hundred: 100px; #app { position: relative; width: 500px; height: 500px; border: 1px solid red; background: url('./logo.png') no-repeat; box-sizing: border-box; .top { position: absolute; top: 0; left: @hundred; right: @hundred; height: @hundred; border: 2px dotted green; } .bottom { position: absolute; bottom: 0; left: @hundred; right: @hundred; height: @hundred; border: 2px dotted green; } } 编译后结果： #app { position: relative; width: 500px; height: 500px; border: 1px solid red; background: url(fb05d05e8b958e9341f72003afbffed3.png) no-repeat; box-sizing: border-box; } #app .top { position: absolute; top: 0; left: 100px; right: 100px; height: 100px; border: 2px dotted green; } #app .bottom { position: absolute; bottom: 0; left: 100px; right: 100px; height: 100px; border: 2px dotted green; } 说明运行正常。 【注一】 .less 可以通过 @import 来引入其他的 .less 文件 或 .css 文件； 引入的less文件会和之前的less文件同一个<style>标签，而引入的css文件会变成新标签； 【注二】 如果想要实现如下引用顺序： .css 引用 .less； 那么必须在解析 .css 文件的时候，配置less-loader，配置如下： { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'less-loader' // compiles Less to CSS ] } 当以css文件作为入口时，起作用的是上面这个配置，而不是 test: /\.less$/, 这个配置了。 2.2、globalVars 名称 类型 默认值 描述 globalVars {Object} undefined 声明全局变量 正常使用less的全局变量没什么好说的（创建一个用于配置全局样式的 .less 文件，然后在需要使用全局样式的 .less文件里引用他）。 当然，这种方式很麻烦。 但是，less-loader里还提供了另外一种使用全局变量的方式，即在options.globalVars里进行配置。 示例代码： //webpack.config.js ... test: /\.less$/, use: [ 'style-loader', 'css-loader', { loader: 'less-loader', // compiles Less to CSS options: { // 这里配置全局变量 globalVars: { 'ten': '10px', // ten可以是ten，也可以是@ten，效果一样，下同 'hundred': '100px' } } } ] ... // style.less ... height: @hundred; ... border: @ten dotted green; ... 编译后变为： ... height: 100px; ... border: 10px dotted green; ... 【注】 globalVars 的 key ，前面有没有 @ 的效果是一样的； 用 modifyVars 替代 globalVars 的效果似乎是一样的（简单测试后如此，但不确定）； 2.2、paths 名称 类型 默认值 描述 paths {Array} undefined less文件里，使用独立的文件解析路径 解释： 首先，这个不影响 js 文件导入 less 文件，只是影响 less 文件引入其他 less 文件（不包括图片文件等）； 值是数组，数组的元素的类型是字符串（但实测中，数组只有第一个元素生效，其他似乎会被忽视）； 数组的元素的值，需要是文件夹的【绝对路径】； 假如图片／文件在使用非相对路径时，例如：是 bar.less 时，less-loader 会去 paths 数组里第一个元素描述的绝对路径，去找对应的文件； 使用 paths 时，路径寻找顺序： 1、假如配置如下： paths: [ path.resolve(__dirname, "test") ] 2、less文件里，这么引用其他 .less 文件： @import 'foo.less'; 3、webpack的寻找顺序是： 在同目录下寻找 'foo.less'，没有找到的话进入下一步； 在 path.resolve(__dirname, "test") ，即 webpack.config.js 的同目录中的 test 文件夹里，去找 foo.less，没有找到的话进入下一步； 最后，会在执行shell命令的文件夹中，去找 foo.less这个文件； 如果以上都找不到，那么会报错。
-
发表了文章 2017-12-12
手把手教你webpack3（9）File-Loader配置简述
FILE-LOADER配置简述 前注： 文档全文请查看 根目录的文档说明。 如果可以，请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里，发【Issues】。 DEMO地址 1、概述 简单来说，file-loader 就是将文件（由于一般是图片文件为主，所以下面通常使用图片两字作为替代，方便理解。其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中。 处理的内容包括： 文件名的处理，比如加 [hash] ； 路径的处理，比如【把图片文件统一放到img文件夹中】； 优点： 相较于 url-loader 可以将图片转为base64字符串，file-loader 在功能上更加强大一些； 缺点： 实际开发中，将一定大小以下的图片转为 base64字符串，有利于加载速度的提升。 2、配置 2.1、name 名称 类型 默认值 描述 name {String|Function} [hash].[ext] 为你的文件配置自定义文件名模板 简单的来说，这个就是规定，如何命名打包后的文件夹的文件名的。 默认值表示：命名是 哈希值 + 扩展名 的形式。 常见命名方式是：img/[hash].[ext]，即将所有的图片（准确的说，是被file-loader处理的文件），都打包到 img 文件夹下。 几点： [hash:6]可以控制 hash 值的长度，6 表示长度为6，默认是 32； [ext] 表示是原文件的扩展名，应该没人会想改这个吧？ [path] 不好用一句话概括。举个例子，图片在 /src/logo.png，打包后文件夹是 dist，配置为 '[path][name].[ext]'，那么图片最终为：/dist/src/logo.png。实际上是相对于context的路径，context默认是webpack.config.js 的路径； [name] 表示原文件的文件名（不含后缀名）。例如 logo.png 就是指 logo，但一般不推荐用这个，或者就算用这个，也要加上 [hash]，不然不同文件夹有同名文件就出问题了； [hash] 的全部实际为：[<hashType>:hash:<digestType>:<length>]，中间用冒号连接，除了 hash 都可以省略，通常使用默认的就行了，顶多带个长度来限制文件名长度。 2.2、context 名称 类型 默认值 描述 context {String} this.options.context 配置自定义文件 context，默认为 webpack.config.js context 简单暴力的说，影响 name 中的 [path]， 举例： 根目录文件夹名为：file_loader； 图片路径：src/logo.png； 打包文件夹是：dist； 配置为：context: __dirname + '/../'，name: '[path][name].[ext]'； 打包结果：dist/file_loader/src/logo.png； 2.3、publicPath 名称 类型 默认值 描述 publicPath {String|Function} __webpack_public_path__ 为你的文件配置自定义 public 发布目录 publicPath 这个一般会用webpack本身配置的，和那个效果也一样，但假如你想单独配置，就用这个。 举例： 假如，你计划把图片打包到放到CDN，我随便举个例子：https://www.abc.com/img这个目录下； 由于 CDN 和你本地服务器的网址肯定不同，所以你显然是需要通过绝对路径来加载这个图片的； 假如，图片名字为：logo.png（为了方便理解，我不加[hash]），那么预期图片的 url 为：https://www.abc.com/img/logo.png； 那么，你这样配置就可以了：publicPath: 'https://www.abc.cn/img/'，name: '[name].[ext]' 于是，图片被打包到img文件夹下，加载该图片的链接是：https://www.abc.cn/img/logo.png； 最后，你把img文件夹整个丢到 CDN 上，就ok啦； 2.4、outputPath 名称 类型 默认值 描述 outputPath {String|Function} 'undefined' 为你的文件配置自定义 output 输出目录 这个就更简单了，就是相当于在name之前加了一个文件夹路径； 示例代码： name: '[name].[ext]', // 文件名，这个是将图片放在打包后的img文件夹中 publicPath: 'https://www.abc.cn/img/', outputPath: 'myImage/' // 这里记得后面要加一个斜杠 图片路径为：src/logo.png，打包后引用该图片的 url 变为：https://www.abc.cn/img/myImage/logo.png 效果和以下配置是一样的： name: 'myImage/[name].[ext]', // 文件名，这个是将图片放在打包后的img文件夹中 publicPath: 'https://www.abc.cn/img/', 但优点在于，这个属性可以配为函数，因为是函数，所以就可以判断环境，然后返回不同的值； 当然，name 也可以实现（写成一个函数的返回值，例如 name: getName()），但毕竟不好看，对吧； 注： 1、如果要写成函数，应该写成如下形式： outputPath: function (fileName) { return 'myImage/' + fileName // 后面要拼上这个 fileName 才行 } 2.5、useRelativePath 名称 类型 默认值 描述 useRelativePath {Boolean} false 如果你希望为每个文件生成一个相对 url 的 context 时，应该将其设置为 true 一般不启用这个。 至于效果，简单来说，当这个开关打开时： 首先会获取源代码中，图片文件，相对于css文件的路径关系； 然后打包后，css 代码通常会被打包到 js 文件中，于是根据之前所获取的【路径关系】，来保存打包好的图片文件； 举例来说： 图片路径：src/img/logo.png； css 路径：src/style/style.css； useRelativePath 设为 true； css被打包到js后，js的文件路径：dist/dist.js； 打包后的图片路径：img/logo.png； 原因是图片相对于css的路径关系是：css文件的上级目录的img文件夹中命名为logo.png； 2.6、emitFile 名称 类型 默认值 描述 emitFile {Boolean} true 默认情况下会生成文件，可以通过将此项设置为 false 来禁止（例如，使用了服务端的 packages） 简单粗暴的说，这个设置为 false 后，除了图片不会被打包出来，其他都按正常的来。
-
发表了文章 2017-12-12
手把手教你webpack3（8）url-Loader配置简述
URL-LOADER配置简述 前注： 文档全文请查看 根目录的文档说明。 如果可以，请给本项目加【Star】和【Fork】持续关注。 有疑义请点击这里，发【Issues】。 DEMO地址 1、概述 简单来说，url-loader的效果类似file-loader。 优点： 可以将css文件中的图片链接，转为base64字符串，或移动到打包后文件夹； 缺点： 可配置性比file-loader弱一些，但其实file-loader的那些配置，一般也用不到。 2、配置 2.1、limit 名称 类型 默认值 描述 limit {Number} undefined Byte limit to inline files as Data URL 使用url-loader的唯一目的，可以说就是为了这个，效果是将文件大小低于指定值的图片，转为base64字符串。 值表示小于这个大小的图片会被转码，单位是字节（1024 即 1KB） 配置： { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 10000 } } ] } css文件： #app { position: relative; width: 500px; height: 500px; border: 1px solid red; background: url('./logo.png') no-repeat; box-sizing: border-box; } #logo { position: relative; width: 100px; height: 100px; border: 1px solid red; background: url('./logo.jpg') no-repeat; box-sizing: border-box; } webpack打包后效果： url('./logo.jpg') 和 url('./logo.png') 变为 url(很长一个base64字符串) 注： 如果你想 .png 文件小于8kb转为base64字符串，但是 .jpg文件不管大小多少，都不转为base64字符串； 那么就需要用 file-loader 来搬运 .jpg 文件， url-loader 来搬运和转码 .png文件； 不能尝试两次调用 url-loader 来，用两个不同的配置来同时处理两种情况； 不过这个场景应该出现的极少。 2.2、mimetype 名称 类型 默认值 描述 mimetype {String} extname Specify MIME type for the file (Otherwise it's inferred from the file extension) 这个配置的意思呢，就是说，要不要把其他后缀名的图片文件，统一转为同一种格式的base64编码。 例如： 假如我有一个logo.png和一个logo.jpg图片； 那么png文件转码后的开头部分是：data:image/png;base64,； 而jpg文件转码后的开头部分是：data:image/jpeg;base64,； 如果配置这么写：mimetype: 'image/png'； 那么开头部分将统一变为：data:image/png;base64,； 另外，这个改变只是修改开头部分，但是实际大小是不影响的（当然，jpeg要比png多一个字符，实际测试结果，表示差别只有这一个字符而已）；
滑动查看更多
暂无更多信息
-
发表了文章
2017-12-19
webpack3实战（5）打包一个多页、jQuery、图片转base64、压缩混淆、异步模块加载的项目
-
发表了文章
2017-12-12
手把手教你webpack3（11）PostCSS-Loader配置简述
-
发表了文章
2017-12-12
手把手教你webpack3（10）Less-Loader配置简述
-
发表了文章
2017-12-12
手把手教你webpack3（9）File-Loader配置简述
-
发表了文章
2017-12-12
手把手教你webpack3（8）url-Loader配置简述
-
发表了文章
2017-12-12
手把手教你webpack3（7）style-loader详细使用说明
-
发表了文章
2017-12-12
手把手教你webpack3（6）css-loader详细使用说明
-
发表了文章
2017-12-12
手把手教你webpack3（5）babel-loader详细使用说明
-
发表了文章
2017-12-12
手把手教你webpack3（4）出口（详解）
-
发表了文章
2017-12-12
手把手教你webpack3（3）入口（多入口）entry
-
发表了文章
2017-12-12
手把手教你webpack3（2）简单指令（npm脚本）
-
发表了文章
2017-12-12
手把手教你webpack3（1）最简单的webpack实例
-
发表了文章
2017-10-31
就算萌新也能看得懂的gulp教程（1）：①读②改③写
-
发表了文章
2017-09-18
三十分钟熟悉es6（es6常用功能总结）
-
发表了文章
2017-06-12
es6（2）——let和const
-
发表了文章
2017-06-12
es6（1）——Babel
-
发表了文章
2017-03-10
ajax的手写、封装和自定义设置
-
发表了文章
2017-02-25
Vue插件写、用详解（附demo）
-
发表了文章
2017-02-25
Vue的异步组件
-
发表了文章
2016-12-15
带你快速玩转canvas——写个折线图
滑动查看更多
暂无更多信息