未加星标

用于前端开发的webpack4配置[带注释]

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

:heart:觉得不错点个赞哟:heart:。原文链接

随着web开发变得越来越复杂,我们需要使用工具来帮助我们构建现代化网站。这是一个完整通过复杂webpack4配置的线上生产例子。


用于前端开发的webpack4配置[带注释]

构建现代化网站已经成为自定义应用程序开发,网站期望能做的更多,具有传统应用的功能,而不仅仅是一个推广网站。

随着一个流程变得复杂时,我们就会将它分解为可管理的组件,并使用工具进行自动化构建,比如制造汽车、起草法案[法律文件]、建立网站。

使用正确的工具完成工作

像webpack这样的工具一直处于现代web开发的最前沿,正是因为如此,它帮助我们构建复杂的事物。

webpack4拥有一些意想不到的改进,最吸引我的就是它在构建速度上面变得有多快,所以我决定采用它。


用于前端开发的webpack4配置[带注释]

hold住,因为这是一篇充满大量信息的长篇文章。

采用webpack 一年多以前,我发表了一篇文章: A Gulp Workflow for Frontend Development Automation [用于前端自动化的gulp工作流],讲解了如何使用 gulp 完成同样的事情。然而在这段时间里,我越来越多地使用像Vue-JS和GraphQL这样的前端框架,如 Using VueJS + GraphQL to make Practical Magic 这篇文章。

我发现webpack让我更容易的去构建各种类型的网站以及应用程序,而且它也允许我使用最现代化的工具链。

还有其他选择:

Laravel Mix是基于webpack的构建工具层,它十分简洁,你可以快速启动并运行,它可以在90%的时间内完成你想要的任务,但剩下的10%无论如何都会进入到webpack,目前还不支持webpack4。

如果你只是用VueJS前端框架,那么使用vue-cli是个不错的选择,它也是基于webpack,大部分时间都可以工作,并且为你做一些意想不到的事情。但同样的,当它提供的功能已经满足不了你的需求,你还是需要用到webpack,而且我并不是只使用VueJS。

Neutrino也是基于webpack,我们可以关注博客: Neutrino: How I Learned to Stop Worrying and Love Webpack 。神奇的点就是它可以通过像搭乐高积木一样去配置webpack,但学习使用让的成本跟学习webpack其实差不了多少。

如果你选择上述工具(或者其他工具),我不会对你提出任:它们都是基于webpack封装。

理解开发系统中层是如何工作的是有好处的。

最终,你只需要决定你希望站在前端技术金字塔中的哪个位置。

某些时候,我认为了解像webpack这样重要的工具是如何工作是有意义的。不久前,我向Sean Larkin(webpack核心团队成员之一)抱怨说webpack就像一个“黑匣子”,他的回答简洁却非常精辟:

It’s only black if you haven’t opened it.[如果你没有打开这个所谓的“黑匣子”,它永远都是未知的。]

他说的对,是时候打开“黑匣子”了。

本文不会教你所有关于webpack的知识,甚至是如何安装它,下面有很多、资料给你选择,你可以选择你认为不错的方式:

webpack―the Confusing Parts ――简要概述了webpack的工作原理。

webpack documentation ―― 建议读webpack官方文档,如果你想学好它的话

webpack fundamentals ―― webpack教学视频

How to switch from Gulp to webpack

这样的资料还有很多,相反地本文将用webpack4配置一个复杂的完整工作例子,并添加注释。你可以使用完整的示例,也可以使用它的部分配置项,但希望你可以从中学到一些东西。在我学习webpack的过程中,我发现有很多教程视频,一堆文章给你将如何安装它并添加一些基础配置,但却大部分没有实际线上生产环境的webpack配置示例,所以我写了这篇文章。

WHAT WE GET OUT OF THE BOX

当我开始通过打开“黑匣子”来学习webpack时,我有一份我依赖的技术列表,我想将它成为构建流程的一部分。我也会花时间四处看看,看看在这个过程中,我还能采用什么。

正如在文章 A Pretty Website Isn’t Enough article 讨论的那样,网站性能一直都是我关注的重点,所以在配置webpack过程中关注性能问题也很正常。


用于前端开发的webpack4配置[带注释]

所以这是我想用webpack为我处理的事情,以及我希望在构建过程中加入的技术:

Development / Production ―― 在本地开发中,我通过webpack-dev-server进行快速构建,对于生产环境的构建(通常通过buddy.works在Docker容器中构建),我希望尽可能优化每一个点。因此,我们区分 dev 和 prod 的配置以及构建。

Hot Module Replacement ―― 当我修改了js、css或者页面,我希望网页能够自动刷新,大幅度提高了开发效率:不需要你去点浏览器刷新按钮。

Dynamic Code Splitting ―― 我不想手动在配置文件中定义js chunk,所以我让webpack帮我解决这个问题。

Lazy Loading ―― 又称异步动态模块加载,在需要时加载所需的代码资源。

Modern & Legacy JS Bundles ―― 我想将es2015 + javascript模块发布到能够支持全球75%以上的浏览器上,同时为低版本的浏览器提供一个补丁包(包括所有转码和polyfills)。

Cache Busting via manifest.json ―― 可以让我们为静态资源设置缓存,同时保证它们在更改使自动重新缓存。

Critical CSS ―― 根据文章 Implementing Critical CSS on your website ,可以提高首页面的加载速度。

Workbox Service Worker ―― 我们可以使用Google的Workbox项目为我们创建一个Service Worker ,了解我们项目的所有东西[这句翻译的有点问题,可以看原文理解]。PWA,我们来了!

PostCSS ―― 我认为它是“css的babel”,像sass和scss都是基于它来构建,它让你可以使用即将推出的css功能。

Image Optimization ―― 目前,图片仍然是大部分网页呈现的主要内容,所以可以通过 mozjpeg , optipng , svgo 等自动化工具来压缩优化图片资源是很有必要的。

Automatic .webp Creation ―― Chrome、Edge和FireFox都支持.webp文件,它比jpeg体积更小,节省资源。

VueJS ―― VueJs是我这次用的前端框架,我希望能够通过单个文件 .vue 组件作为开发过程的一部分。

Tailwind CSS ―― Tailwind是一个实用程序优先的css,我用它在本地开发中快速进行原型设计,然后通过PurgeCss进行生产,从而减小体积。

哇,看起来相当丰富的清单!


用于前端开发的webpack4配置[带注释]

还有很多东西,比如JavaScript自动化、css压缩以及其他标准配置,去构建我们期望的前端系统。

我还希望它可以给开发团队使用,开发团队可以使用不同的工具应用在他们的本地开发环境,并使配置易于维护以及可以被其他项目重用。

The importance of maintainability and reusability can’t be understated [可维护性和复用性是非常重要的。]

你使用的前端框架或者技术栈可以跟我的不一样,但应用的规则其实是相同的,所以请继续阅读其余部分,不管你用的是什么技术栈!

PROJECT TREE & ORGANIZATION

为了让你了解程序的整体架构,这里展示一个简单的项目树:

├── example.env ├── package.json ├── postcss.config.js ├── src │ ├── css │ │ ├── app.pcss │ │ ├── components │ │ │ ├── global.pcss │ │ │ ├── typography.pcss │ │ │ └── webfonts.pcss │ │ ├── pages │ │ │ └── homepage.pcss │ │ └── vendor.pcss │ ├── fonts │ ├── img │ │ └── favicon-src.png │ ├── js │ │ ├── app.js │ │ └── workbox-catch-handler.js │ └── vue │ └── Confetti.vue ├── tailwind.config.js ├── templates ├── webpack.common.js ├── webpack.dev.js ├── webpack.prod.js ├── webpack.settings.js └── yarn.lock 复制代码

完整的代码可以查看: annotated-webpack-4-config

在核心配置文件方法,包括:

.env ―― webpack-dev-server特定于开发环境的设置,不需要在git中检查

webpack.settings.js ―― 一个JSON-ish设置文件,我们需要在项目之间编辑的唯一文件

webpack.common.js ―― 相同类型的构建放在统一设置文件

webpack.dev.js ―― 设置本地开发各个构建

webpack.prod.js ―― 设置生产环境各个构建

这是一个如何将以上配置组合成的图表:


用于前端开发的webpack4配置[带注释]

目标是你只需要编辑项目之间的金色圆角区域( .env & webpack.settings.js )。

以这种形式分离出来使得配置文件使用变得更加容易,即使你最终修改了我原先提供的各种webpack配置文件,但保持这种方式有助于你长期去对配置文件进行维护。

别着急,我们等下会详细介绍每个文件。

ANNOTATED PACKAGE.JSON

让我们从修改我们的 package.json 开始入手:

{ "name": "example-project", "version": "1.0.0", "description": "Example Project brand website", "keywords": [ "Example", "Keywords" ], "homepage": "https://github.com/example-developer/example-project", "bugs": { "email": "someone@example-developer.com", "url": "https://github.com/example-developer/example-project/issues" }, "license": "SEE LICENSE IN LICENSE.md", "author": { "name": "Example Developer", "email": "someone@example-developer.com", "url": "https://example-developer.com" }, "browser": "/web/index.php", "repository": { "type": "git", "url": "git+https://github.com/example-developer/example-project.git" }, "private": true, 复制代码

这里没什么有趣的东西,只是包含了我们网站的元信息,就像 package.json 规范中所述。

"scripts": { "dev": "webpack-dev-server --config webpack.dev.js", "build": "webpack --config webpack.prod.js --progress --hide-modules" }, 复制代码

上述脚本代表了我们为项目提供的两个主要构建步骤:

dev ―― 只要我们修改了项目的代码,启动该配置后,它会使用webpack-dev-server来实现热模块替换(HMR),内存编译以及其他细节处理。

build ―― 当我们进行生产部署时,它会执行所有花哨以及耗时的事情,例如Critical CSS、JavaScript压缩等。

我们只需要在命令行执行以下操作: 如果我们使用的是 yarn ,输入 yarn dev 或者 yarn build ;如果使用的是npm,输入 npm run dev 或者 npm run build 。这些是你唯一需要使用的两个命令。

请注意,不仅可以通过 --config 配置,我们还可以传入单独的配置文件进行配置。这样我们可以将webpack配置分解为单独的逻辑文件,因为与生产环境构建相比,我们将为开发环境的构建做很多不同的事情。

接下来我们的 browserslist 配置:

"browserslist": { "production": [ "> 1%", "last 2 versions", "Firefox ESR" ], "legacyBrowsers": [ "> 1%", "last 2 versions", "Firefox ESR" ], "modernBrowsers": [ "last 2 Chrome versions", "not Chrome < 60", "last 2 Safari versions", "not Safari < 10.1", "last 2 iOS versions", "not iOS < 10.3", "last 2 Firefox versions", "not Firefox < 54", "last 2 Edge versions", "not Edge < 15" ] }, 复制代码 这是一个基于人类可读配置的特定 浏览器列表 , PostCSS autoprefixer 默认使用在 production 设置中,我们将 legacyBrowsers 和 modernBrowsers 传递给 Babel 用来处理传统[过去]和现代js包的构建[处理转码问题,兼容es6等写法],后面会有详细介绍。

接着是 devDependencies ,它是构建系统所需的所有npm包:

"devDependencies": { "@babel/core": "^7.1.0", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-transform-runtime": "^7.1.0", "@babel/preset-env": "^7.1.0", "@babel/register": "^7.0.0", "@babel/runtime": "^7.0.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.2", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.2", "create-symlink-webpack-plugin": "^1.0.0", "critical": "^1.3.4", "critical-css-webpack-plugin": "^0.2.0", "css-loader": "^1.0.0", "cssnano": "^4.1.0", "dotenv": "^6.1.0", "file-loader": "^2.0.0", "git-rev-sync": "^1.12.0", "glob-all": "^3.1.0", "html-webpack-plugin": "^3.2.0", "ignore-loader": "^0.1.2", "imagemin": "^6.0.0", "imagemin-gifsicle": "^5.2.0", "imagemin-mozjpeg": "^7.0.0", "imagemin-optipng": "^5.2.1", "imagemin-svgo": "^7.0.0", "imagemin-webp": "^4.1.0", "imagemin-webp-webpack-plugin": "^1.0.2", "img-loader": "^3.0.1", "mini-css-extract-plugin": "^0.4.3", "moment": "^2.22.2", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss": "^7.0.2", "postcss-extend": "^1.0.5", "postcss-hexrgba": "^1.0.1", "postcss-import": "^12.0.0", "postcss-loader": "^3.0.0", "postcss-nested": "^4.1.0", "postcss-nested-ancestors": "^2.0.0", "postcss-simple-vars": "^5.0.1", "purgecss-webpack-plugin": "^1.3.0", "purgecss-whitelister": "^2.2.0", "resolve-url-loader": "^3.0.0", "sane": "^4.0.1", "save-remote-file-webpack-plugin": "^1.0.0", "style-loader": "^0.23.0", "symlink-webpack-plugin": "^0.0.4", "terser-webpack-plugin": "^1.1.0", "vue-loader": "^15.4.2", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.5.17", "webapp-webpack-plugin": "https://github.com/brunocodutra/webapp-webpack-plugin.git", "webpack": "^4.19.1", "webpack-bundle-analyzer": "^3.0.2", "webpack-cli": "^3.1.1", "webpack-dashboard": "^2.0.0", "webpack-dev-server": "^3.1.9", "webpack-manifest-plugin": "^2.0.4", "webpack-merge": "^4.1.4", "webpack-notifier": "^1.6.0", "workbox-webpack-plugin": "^3.6.2" }, 复制代码

没错,这里面依赖了很多npm包,但我们的构建过程确实做的事情需要用到它们。

最后, dependencies 的使用:

"dependencies": { "@babel/polyfill": "^7.0.0", "axios": "^0.18.0", "tailwindcss": "^0.6.6", "vue": "^2.5.17", "vue-confetti": "^0.4.2" } } 复制代码

显然,对于一个真实存在的网站或者应用, dependencies 中会有更多npm包,但我们现在专注于构建过程。

ANNOTATED WEBPACK.SETTINGS.JS

我还使用了我在 A Better package.json for the Frontend article 一文中讨论过的类似方法,为了封锁从项目之间配置变为单独的 webpack.settings.js ,并保持webpack配置本身不变。

The key concept is that the only file we need to edit from project to project is the webpack.settings.js. [关键概念是我们需要在项目之间编辑的唯一文件是webpack.settings.js]

由于大部分项目都有一些非常相似的事情需要完成,所以我们可以创建一个适用于各个项目的webpack配置,我们只需要更改它所操作的数据。

因此,在我们的 webpack.settings.js 配置文件中的内容(从项目到项目的数据)和webpack配置中的内容(如何操作这些数据产生最终结果)之间的关注点分离。

// webpack.settings.js - webpack settings config // node modules require('dotenv').config(); // Webpack settings exports // noinspection WebpackConfigHighlighting module.exports = { name: "Example Project", copyright: "Example Company, Inc.", paths: { src: { base: "./src/", css: "./src/css/", js: "./src/js/" }, dist: { base: "./web/dist/", clean: [ "./img", "./criticalcss", "./css", "./js" ] }, templates: "./templates/" }, urls: { live: "https://example.com/", local: "http://example.test/", critical: "htt

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:用于前端开发的webpack4配置[带注释]
本站链接:https://www.codesec.net/view/620972.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(140)