webpackを使ってウェブプロジェクトを迅速に構築する方法をご案内します。

4920 ワード

webpack ビルド webプロジェクト

webpackを使ってwebプロジェクトを構築し、熱い配置のプラグインを使用して、以下の手順で、迅速な構築と理解を助けることができます。
詳しい勉強は公式文書に頼るべきです。
一、基礎構築部分
大前提！まずNode.jsをインストールしてください。ここでは詳しく説明しません。
1，フォルダを作成します。
在这里插入图片描述

2,コマンドラインツールを現在のファイルクリップの下で開きます。
在这里插入图片描述

3、プロジェクト初期化（package.jsonファイル作成）


npm init -y

4,インストール依存
バージョンの組み合わせは以下の通りです。


"devDependencies": {
  "webpack": "^4.17.1",
  "webpack-cli": "^3.3.9",
  "webpack-dev-server": "^3.8.2",
 }

「コマンドラインツール」にコピーして返車し、インストールに依存する以上、自動的にpackage.jsonに上記の依存を書き込みます。


npm install webpack@^4.17.1 webpack-cli@^3.3.9 webpack-dev-server@^3.8.2 --save-dev

インストール完了を表示:
在这里插入图片描述

5、依存関係を追加します。プラグイン:
用途：このプラグインがなければ、私達は手動でindex.ファイルにbundle.jsを導入する必要があります。このプラグインを使うと、私たちは自動的にパッケージ化時にindex.を作成します。また、bundle.jsのファイルパスに関心を持つ必要はありません。
コピーして【コマンドラインツール】に貼り付けて車に戻ります。


npm install html-webpack-plugin --save-dev

プラグインはどのように構成されていますか？
フォルダの内容は以下の通りです。
在这里插入图片描述

6、補足ファイル構造：
在这里插入图片描述

7、webpack.co.nfig.jsの内容を補充する：
webpack公式説明文書を整理して、後から自分で補ってあげます。
1,httml-webpack-plugin公式説明文書
2,webpackの基礎構成
3,webpack-dev-serverの公式説明文書


// webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/main.js',//      
  output: {
    filename: 'bundle.js',//        
    path: path.resolve(__dirname, 'dist')//        
  },
  devServer: {//  webpack-dev-server（         ）
    contentBase: "./dist",//        ，          index.html  。
    host:"localhost",//    
    port:8000,//     
    open:true//          
  },
  plugins: [
    new htmlWebpackPlugin()//            index.html      bundle.js        bundle.js     。
  ]
};

テストコードは、Main.jsファイルで作成します。


document.write("hello webpack!!")

二、テスト部分
テストをローカルに持ち帰ります。
注意：html-webpack-pluginを使わないとdistディレクトリのindex.でjsファイルを手動で導入する必要があります。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="bundle.js"></script>
</head>
<body>

</body>
</html>

端末入力：webpack
在这里插入图片描述

包装が成功したら、distディレクトリの下にもう一つ、bundle.jsファイルがあります。
html-webpack-pluginプラグインを使用するとindex.が自動的に作成され、以前自分で作ったindex.を上書きします。
在这里插入图片描述

distディレクトリのindex.ファイルを開きます。テスト結果を表示
在这里插入图片描述

テストパッケージを仮想サーバメモリに保存します。
みんなが知っているテクニックです。
package.jsonファイルの下にwebpack-dev-serverのショートカットキーを配置します。
在这里插入图片描述

設定が完了したら、端末で使用できます。npm run devを包装します。
自動でページを開きます。アドレスバーと上のローカルの違いを見てください。
在这里插入图片描述

ここに来て、基本的な構築ができました。
踏んだ穴:
バージョン番号を指定せずに直接下記の依存をインストールします。
webpackwebpack-cliwebpack-dev-server


npm install webpack webpack-cli webpack-dev-server --save-dev

熱い展開（webpack-dev-server）を使うと次のようにエラーが発生します。
Error：Canot find module'webpack-cli/bin/config-yargs'
このエラーが発生したパートナーは、文章の中の組み合わせのバージョンを試してみてください。
webpackはデフォルトではjsonモジュールとjsモジュールだけを包装します。他のモジュールの包装についてはcss、画像など、対応するloaderプラグインを利用します。次の機会に引き続き共有します。
ここでwebpackを使ってウェブプロジェクトを迅速に構築する方法についての記事を紹介します。webpack関連のウェブプロジェクトの内容は以前の文章を検索したり、次の関連記事を見たりしてください。これからもよろしくお願いします。

flexではRadio Button Groupを使用して選択した値を取り出す方法です。

FLEXはページにスクロールバーを追加して構想とコードを実現します。