《前端之路》之 webpack 4.0+ 的应用构建
一、版本
当前 webpack 版本 : v4.18.0
webpack -v
// 4.18.0
同之前的版本不一样的地方是需要 全局安装 webpack-cli
webpack-cli -v
// 3.1.0
思考这个 webpack-cli 是真的有用么? 其实对于我来讲感觉很鸡肋,虽然它是出现是为了让我webpack 零配置化,但就目前 webpack-cli 的体验来讲,还是比较鸡肋,在实际的开发过程中,我还是比较喜欢 diy ,这样自由的折腾方式, 零配置,就意味着你要为 高度定制化作出牺牲。
这让我想起了之前面试很多前端开发的时候,其实就是一个很简单的问题,如何搭建一个最简单的 webpack 的开发架构,JS 压缩一下, LESS 预编译一下, CSS 压缩一下。这类,很多习惯了用 vue-cli 的同学就懵逼了,因为他们认为 架构就是用别人的东西,但实际的开发中,出于业务需求的需要,我们的架构需要更加多的灵活性和高度可定制化性。 所以这才是写这篇文章的 出发点。
二、webpack 的主体概念
开局一张图:
本质上,webpack
是一个现代 JavaScript 应用程序的静态模块打包器
(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle。
在开始前我们需要先理解它的
核心概念
:
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
2-1、入口
入口起点(entry point)
这里是一切开始的起点。面对实际的业务来讲的话,可以分为单页面( SPA ) 和多页面。那么今天就针对这2种情况来分别 介绍下 利用 webpack 进行项目架构的需要注意的地方。
2-1-1、单页面入口
2-1-1-1、实现的写法:
webpack.config.js
module.exports = {
entry: './app.js'
}
2-1-1-2、同样也可以通过对象语法来解决不同场景的问题:
webpack.config.js
module.exports = {
entry: {
app: './app.js',
vendors: './src/JQ.js'
}
}
2-1-2、多页面应用的入口
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
但是这里只是人工的去配置了多页面,其实很明显这种做法很不聪明。
所以你需要一个聪明的做法,这里就大致讲一下思路。 通过
( ' ./src/**/*.js' ) 匹配到 多页面到文件入口路径,然后 通过 glob.sync(globPath)
获取到全部路径,拿到每个页面的 入口文件路径。 最后传值给 webpack 的 entry 对象。
2-2、输出
2-2-1、单页面 输出
webpack.config.js
module.exports = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
2-2-2、多页面 输出
webpack.config.js
module.exports = {
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};
2-3、loader
这里的 loader 就像一个又一个的加工厂一样,把你输送给 加工产的原材料加工生成你想要的成品或者半成品。最后出厂~
有用过 gulp 类似的构建工具等同学 就很 容易理解,这里的一个个的 loader 就想当一一个个的 task, 这个任务完成就会交给下一个人,直到整个流水线工作跑完~
在更高层面,在 webpack 的配置中 loader 有两个特征(demo):
webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
}
其中有三个需要注意的地方:
1、loader 的特征之一: test
属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2、loader 的特征之二: use
属性,表示进行转换时,应该使用哪个 loader。
3、在 webpack 配置中定义 loader 时,要定义在 module.rules
中,而不是 rules
2-3-1、如何编写一个 loader
前期这里也只是大概的了解一下,在后面的文章中,我们会手把手的教你 手写一个 loader
这篇文章还只是教你如何使用 webpack。 敬请期待后面的文章吧
《前端之路》之 webpack 4.0+ 的应用构建的更多相关文章
- 《前端之路》之 Javascript 模块化管理的来世今生
目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- 《前端之路》之二:数据类型转换 && 隐式转换 || 显式转换
目录 02:数据类型转换 && 隐式转换 || 显式转换 02:数据类型转换 && 隐式转换 || 显式转换 在上一个章节中,我们介绍了 JavaScript 的基本的 ...
随机推荐
- 震惊!外部类可以访问内部类private变量
在讲Singleton时我举例时用过这样一段代码: public class SingletonDemo { private static class SingletonHolder{ private ...
- 自定义完美的ViewPager 真正无限循环的轮播图
网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...
- Python_socket_TCP
zServer.py # coding=utf-8 import socket words={'how are you?':'Fine,thank you.', ', 'what is your na ...
- [ 搭建Redis本地服务器实践系列二 ] :图解CentOS7配置Redis
上一章 [ 搭建Redis本地服务器实践系列一 ] :图解CentOS7安装Redis 详细的介绍了Redis的安装步骤,那么只是安装完成,此时的Redis服务器还无法正常运作,我们需要对其进行一些配 ...
- LogicalDOC office预览中文乱码的问题
近期在试用LogicalDOC,一个文档管理系统. 上传的office文件预览中文乱码 问题原因是LibreOffice缺少对应的中文字体导致,只需要把对应的中文字体拷贝到/opt/libreoffi ...
- C++ Singleton (单例) 模式最优实现
参考:http://blog.yangyubo.com/2009/06/04/best-cpp-singleton-pattern/ 索引 静态化并不是单例 (Singleton) 模式 饿汉模式 懒 ...
- MyBatis xml配置文件详解
http://blog.csdn.net/fenghuibian/article/details/52525671
- iPhone越狱
手机越狱 常用工具:PP越狱助手.盘古越狱.iTunes 如果手机第一次越狱使用pp越狱助手成功率比较高 iPhone固件下载地址http://iphone.91.com/fw/iphone5/ 具体 ...
- JVM-01:类的加载机制
本文从 纯洁的微笑的博客 转载 原地址:http://www.ityouknow.com/jvm.html 类的加载机制 1.什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内 ...
- Python题库
Date:2018-05-08 1.Given: an array containing hashes of names Return: a string formatted as a list of ...