|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/webpack-config/
课程评论：没有评论
本课程以Webpack 5为基础，旨在帮助您高效地进行网站制作的HTML/CSS/JS编码。 Webpack是一个强大的工具，它将多种前端开发工具（如Sass, Pug, ES6, React, Vue, Typescript等）集成到一个统一的管理平台中。通过Webpack，您可以极大地提高开发效率和代码的可维护性，尤其是在团队协作项目中。 课程将重点介绍Webpack在网页制作中的具体优势，包括： * **简化HTML管理** * **提升CSS编写效率** * **自动化图片优化** * **利用最新的JavaScript特性** * **集成React/Vue/Typescript等先进技术** * **进行接近生产环境的测试** 此外，课程还将涵盖实际工作中必不可少的**Git版本控制**及其与GitHub的集成，以及使用**Netlify进行网站的在线发布**。 虽然Webpack本身的配置过程可能略显枯燥，但一旦掌握，它将极大地减少重复性劳动，释放您更多的时间专注于创意设计，并使网站管理更加轻松和可靠。本课程的目标是为您提供一套可在实际项目中应用的Webpack方法论。
2020年1月17日 Webpack 5 に対応しました。Webpackという名前を聞いたことがあるでしょうか。Webpackは、Javascriptを結合するためのツールなのですが、それ以外の目的で広くウェブサイト制作の現場で使用されています。それは「作業の効率化」です。Webサイトを構成する要素はHTML / CSS / Javascript / 画像 など様々ですが、それぞれの作成に便利なツールがオープンソースの世界には沢山あります。そういったツールをうまく組み合わせると驚くほど生産性が上がるだけでなく、コードのメンテナンス性も格段に向上します。各ツールを個別に使っても問題はないですが、最終的なアウトプットを出力する手順が煩雑になりますし、個別のツールに関しての知識が前提となるのでチーム開発に向いていません。複数のツールを取り込みつつ、それらを一箇所で管理することで、プロジェクト全体の見通しが良くなり、自分自身もチームのメンバーも素早くミスなく行動することが可能となります。そのための管理ツールがWebpackです。ただ、Webpackの基本はJavascriptであり、すべてのファイルがJavascriptのモジュールとして扱われます。そうです。HTMLもCSSも画像ファイルもすべてがJavascript。あまり馴染みのない概念ですよね。この壁を乗り越えてWebpackが使えるようになれば、SassやPug、ES6やReact / Vue / Typescriptなどの強力なツールを自由に取り込むことができます。残念ながらWebpackの公式サイトだけを見ると、このツールがウェブデザイナーの私にとってどんなメリットがあるのかが伝わってきません。Webpackは非常に柔軟で、ウェブサイト制作以外にも様々なケースで利用されるため、ウェブサイト制作者だけを対象としてはいないからです。この講座では、Webpackを使うことでWebサイト制作にどのようなメリットがあるのか詳しく解説していきます。単にWebpackの使い方を説明するのではなく、ウェブ制作の現場で実際に使えるメソッドの提供を目指しています。具体的には下記の内容が含まれます。HTMLの管理を楽にするCSSを効率的に書く画像の軽量化を自動化新しいJavascriptで楽をする最新の技術を取り込む (React / Vue / Typescript など)本番に近いテスト方法また、制作現場で必須になるであろうGitと、Webサイトの公開方法についても解説しています。Gitの使い方とGithubとの連携Netlifyを使ったウェブサイトの公開方法便利なWebpackですが、正直なところWebpack自体は楽しくありません...。退屈な繰り返し作業を無くすための退屈な作業だとお考えください。ただし、一度覚えてしまえば、一度設定してしまえば、その後の作業効率とメンテナンス効率には圧倒的な差が出ます。ウェブデザイナーがクリエイティブに専念し、ウェブサイト管理者は安心して仕事ができるよう、作業はできるだけ自動化してしまいましょう！
