Webpack第1章(用法)

17027 ワード
webpack テキストリンク
Bundler
複数のファイルをマージする役割
ex) Webpack Broserify, parcel
module
使用理由
  • は、同じ名前で宣言する異なるファイルから変数
    • を分離することができる.
  • ファイル内の変数値は、ファイル内でのみ有効です.
    • index.html
    <html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="root"></div>
    <script type="module">
        import hello_word from "./source/hello.js"
        import world_word from "./source/world.js"
        document.querySelector('#root').innerHTML = hello_word + '  ' + world_word;
    </script>
</body>
</html>
    hello.js
    var word = 'hello';
export default word;
    world.js
    var word ='world';
export default word;
    hello.jsの単語とworld.jsではword競合を避けるために異なる名前でimportを行う.
    Webpackの使い方
    1)npm initコマンド
    現在のディレクトリをノードとして使用します.jsとして宣言すべきプロジェクトフォルダ.
    端末npm init=>package.jsonファイルを生成します.
    package.json
    {
  "name": "ee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
    2) npm install -D webpack webpack-cli
    Webpackに関連するコンテンツをインストールします.
    端末機npm install -D webpack webpack-clipackage.json
    {
  "name": "ee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}
    Webpack、Webpack-cliがインストールされていることがわかります.
    node modulesという名前のフォルダが個別に作成されます.
    index for module.jsに再分割
    index.html
    <html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="root"></div>
    <script src="./source/index.js" type="module">
       </script>
</body>
</html>
    index.js
    import hello_word from "./hello.js"
import world_word from "./world.js"
document.querySelector('#root').innerHTML = hello_word + '  ' + world_word;
    hello.js
    var word = 'hello';
export default word;
    world.js
    var word ='world';
export default word;
    Webpackコマンドの実行npx webpack --entry 대상위치 --output-path 생성위치ex)npx webpack --entry ./source/index.js --output-path ./public/inde x_bundle.js : index.jsのファイルに関連付けられるindex bundle.jsで作成します.
    実行結果
    index.html
    <html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="root"></div>
    <script src="./public/index_bundle.js/main.js" type="module">
       </script>
</body>
</html>
    main.js
    (()=>{"use strict";document.querySelector("#root").innerHTML="hello  world"})();
    bundleで作成したmain.jsをsrcに接続して使用すると、index.js , hello.js, world.jsを含む結果は完全に同じになります.
    △生活コードの授業では、そうすればnpx webpack --entry ./source/index.js --output-path ./public/index_bundle.jsが生成されます.私はindex_bundle.jsです.これは必要に応じて名前を変えればいいようです.=>まずWebpackの成功に満足しています.
    Webpackのメリット
    関連する様々なjsファイルを1つのファイルに変換し、サーバへの転送を最小限に抑える.
    最新のブラウザで利用できるimportなど、古いブラウザでも使えるbundleを知る.jsで作ります.
    ソース
    生活コード
    JavaScript/NODEJS開発者のためのLaravel 6とVUEJSの学習パート1 Laravelのランニング
    mysql文groupby