WebpackによるシンプルなJavaScriptパイプライン
11291 ワード
webpack導入
webpack かなり心からの評判があります.あなたがWebpackを使用して確立されたプロジェクトのコードを掘り下げている場合は、それは可能性が高い最高のごまかし.撮影、ソースコードを見てくださいNext.js — 彼らはan entire directory to manage webpack configuration .
その複雑さは、大部分、その力によるものです.Webpackはたくさん行うことができます.
幸いにも、この無料でオープンソースのツールを構築する素晴らしい人々は、各バージョンを少し簡単に前よりも使いやすくするために取り組んでいる.そして今、あなたは非常に簡単に、非常に小さな設定で起動することができます.したがって、プロジェクトの最小および最も簡単にWebPackの権限を正当化することができます.
我々は何を構築するつもりです
それをしましょう.バンドルにスーパーシンプルビルドパイプラインを構築しましょうJavaScript モジュールを一緒に任意のHTMLページから読み込むことができる単一のファイルに.
ご覧くださいthe full code example あなたが動けなくなるならば、どんな点ででも.
ちゃ!
つの大きなgotcha私たちは道に沿って克服する必要があります.出力バンドルは難読化され、匿名です.つまり、デフォルトではアクセスできません.そして、たとえ我々がそうすることができたとしても、我々はそれを操縦する方法を知らないでしょう.
我々のケースでは、我々は外部の場所(HTMLファイルのような)から我々のバンドルされたコードにアクセスしたいので、我々は我々の主要輸出をロードするつもりです
App 我々がそれから主なHTMLファイルからアクセスできるオブジェクト.特にこの例では、コールすることができます
App.Logger.sayHi() を参照してください"Hi!" コンソールに.レッツゴー!
ステップ1:セットアップ
あなたが行く準備ができているならば、大きい!そうでなければ自由にfollow my steps to get started , 次のように注意してください.
これらは依存する依存関係です.
http-server webpack webpack-cli package.json :// package.json
{
// ...
"scripts": {
"build": "WEBPACK_ENV=production webpack",
"dev": "webpack",
"serve": "http-server dist -p 8000"
}
}
Step 2 : JavaScriptファイルを追加する
JavaScriptのカップルファイルを追加しましょう.最初に、我々のロガー
src/modules/logger.js :// src/modules/logger.js
const sayHi = () => {
console.log("Hi!")
}
export { sayHi }
src/main.js ), をエクスポートするLogger オブジェクト.// src/main.js
import * as Logger from "./modules/logger"
export { Logger }
src ディレクトリは、おそらくこれらのファイルを他の入れ子になった場所に置きたいと思いますjs ディレクトリ.ステップ3 : Webpackの設定を追加する
次に、WebPackの設定を追加しましょう.このコード例はコメントします.
// webpack.config.js
const path = require("path")
// Used to determine whether to watch the files or build.
const env = process.env.WEBPACK_ENV || "development"
module.exports = {
// The main file for the bundle.
entry: "./src/main.js",
output: {
// Name of the bundle file.
filename: "bundle.js",
// Directory in which the bundle should be placed.
// Here we're saying `dist/js/bundle.js` will be our bundled file.
path: path.resolve(__dirname, "dist/js"),
// These two library items tells webpack to make the code exported by main.js available as a variable called `App`.
libraryTarget: "var",
library: "App"
},
mode: env,
// If we're in development mode, then watch for changes, otherwise just do a single build.
watch: env !== "production"
}
main.js はプライマリターゲットファイルで、dist/js/bundle.js . main.js グローバルに利用できるようになりますApp 変数.WEBPACK_ENV に設定されます.production , WebPackの変更を監視します.時WEBPACK_ENV がproduction , これは、束を構築し、実行を停止します.私たちは、この変数をpackage.json . ステップ4 : HTMLを加える
では、シンプルなものを加えましょう
index.html ファイルをdist ディレクトリがあります.<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Webpack ES6 Pipeline</title>
</head>
<body>
<p>Hello there.</p>
<script src="/js/bundle.js"></script>
<script>
App.Logger.sayHi()
</script>
</body>
</html>
このケースでは、私たちは、すでに設定されていたかのようにファイルをここに配置しています.
ステップ5:それを実行!
実際に動作するように2つのコマンドを実行します.最初に、JavaScriptバンドルを構築します
$ npm run build
$ npm run serve
"Hi!" 印刷!JavaScriptを変更したい場合は、Webサーバーを再読み込みせずに反映してください.ラン
npm run serve Webサーバを実行するnpm run dev JavaScriptの変更と再構築を監視します.参考文献
Reference
この問題について(WebpackによるシンプルなJavaScriptパイプライン), 我々は、より多くの情報をここで見つけました https://dev.to/seancdavis/simple-javascript-pipeline-with-webpack-27b4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol