You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
webpack.config.js: const webpack = require("webpack"); module.exports = { entry: { "bundle": "./entry.js", "bundle.min": "./entry.js", }, devtool: "source-map", output: { path: "./dist", filename: "[name].js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({ include: /\.min\.js$/, minimize: true }) ] }; Since Webpack 4, webpack.optimize.UglifyJsPlugin has been deprecated and its use results in e
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク webpackとBabelの基本を理解する(1) ―webpack編―（本記事） webpackとBabelの基本を理解する(2) ―Babel編― webpackとBabelの基本を理解する(3) ―webpackとBabel編― webpackとBabelの基本を理解する(4) ―React編― webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境・バージョン Windows1
webpack 3 を使って、簡単なウェブページを開発する手順を紹介します。あくまで一つの例です。 1つ1つ細かい説明はできていませんが、「だいたいこんなふうにして作ることができますよ」ということが伝わればいいなと思っています。 スポンサードリンク webpack 3 を使ったサンプルページ全てのファイルは、以下のページからダウンロードすることができます。 laboradian/webpack3-sample001: webpack 3 を使ったサンプルプロジェクトテストに関しては、Mocha を使った単体テストのみ行っています。 2. 注意事項サーバー側のプログラミング（PHP など）はありません。3. 環境OS Windows 10 Pro以下のアプリケーションがインストールされていることを前提としています。 Node.js 今回は、Windows 上での作業であるため、「Window
数ページのサイトとはいえテンプレ化はしたい、includeを使うと共通要素を外部ファイル化できて効率いいよね。サンプルとしてファイルは以下におてます。 https://github.com/shigekitakeguchi/yarn-webpack-ejs ちょっとした、例えばブランドサイトとかキャンペーンサイト、小規模な企業や組織、お店のサイトというと構成によっては1ページってこともあるけど数ページから20ページくらいの規模になると思う。 いやいやもっとあるよってことになるかもしれないけど今回紹介しようと思うやり方は数ページから20ページくらいの規模のものが便利なんじゃないかな。 それ以上のサイトになるともうちょっと本格的な静的サイトジェネレーターとかを検討したほうが良いと思う。 数ページとはいえヘッダーやフッター、あとmeta要素やナビゲーション、細かいところでいうとGoogle An
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く