先端ルート&webpack基礎構成の詳細

1.SPA
SPAは単一ページアプリケーションで、一般的には一つのページで一つの完全なウェブサイトを開発する機能です。
利点:

は、ページを移動する必要がなく、部分的にページ内容を更新する

。

先端コンポーネント化

短所:

首のスクリーンローディングが遅い（最初の訪問が遅いので、必要に応じてローディングする）

開発は複雑です。（すべての機能は一つのページで完成しています。webpackを使ってモジュール化して開発できます。）

はSEO検索エンジン最適化（サービス端末レンダリングを使用する）に不利です。

2.先端ルート：

は、使わないURL識別子に従って、異なるコンポーネント（異なるウェブコンテンツ）をレンダリングする

。

ルーティングの実施原理：

hashハッシュ（アンカーポイント）は、hashchange監聴URL識別子によって変更され、異なるコンテンツを表示する

。

<ul>
  <li><a href="#login" rel="external nofollow" >  </a></li>
  <li><a href="#home" rel="external nofollow" >  </a></li>
  <li><a href="#list" rel="external nofollow" >  </a></li>
</ul>
<div id="app"></div>
<script>
//   hash    ,          
window.onhashchange = function() {
  let app = document.getElementById('app');
  //   hash 
  let hash = location.hash.substr(1);
  //                 
  switch(hash) {
    case 'login':
      app.innerHTML = '     ...';  
      break;
    case 'home':
      app.innerHTML = '    ...';
      break;
    case 'list':
      app.innerHTML = '   ...';
      break;
    }
  }
</script>

3.先端モジュール化

Common JS

モジュール導出

module.export

export

モジュール導入

require（）

ES 6 Module

モジュール導出

export

モジュール導入

import

4.webpack基礎配置
初期化項目

npm init -y

依存パッケージのインストール

npm install webpack -D

npm install webpack-cli -D

webpackコマンドでファイルを包む：モジュール変換、コード圧縮統合
webpack.co.nfig.js

const path = require('path');
//         npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
// npm i clean-webpack-plugin -D         
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
//        development    
mode: 'development', // production     
//       ：      
entry: './src/js/index.js',
//       ：       
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'main.min.js'
},
//          loader
module: {
  rules: [
  //   js    （ ES6   ES3/5  ）
  {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    //            
    exclude: path.join(__dirname, './node_modules'),
    //       
    include: path.join(__dirname, './src')
  },
  //   css    
  {
    //   .css     
    test: /\.css$/,
    //   css      ,    ：    
    use: ['style-loader', 'css-loader']
  },
  //   less    
  {
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
  }
  ]
},
//     
plugins: [
  new CleanWebpackPlugin(),
  //     html
  new HtmlWebpackPlugin({
  title: '    ',
  template: 'index.html'
  })
],
//          
devServer: {
  contentBase: path.join(__dirname, 'dist'),
  port: 5000
}
}

package.jsonファイルの配置

"scripts": {
  "dev": "npx webpack-dev-server --open"
}

5.webpackの配置を判断する

ソースファイルを指定して構築プロセスに追加し、webpackによって制御され、構成entry

出力ファイルの位置と名前を指定して、output

を配置します。

カスタム解析と変換ファイル、構成module、通常はmodule.rules内のLoaderを配置します。リソースキャリア

構成プラグインは、pluginsによって構成される

である。

依存モジュールを探している時、レスリング

を構成します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。