ES6 /レスをサポートし、自動的にページファイルに応じて設定を変更し、マルチポータル足場、再利用可能なナビゲーション/ボトムバナー/サイドバーを構築するために0からの使用のWebPACK

前のWebPACK非常に強い知っているが、徹底的に研究されていない、このチュートリアルでは、0から始まる、最初から見て、そのように希望を整理して決定時にマルチポータル、遭遇した多くの問題を開発するための足場に設定します私たちにいくつかの助けを与えます。

WebPACKのHTMLの必要性を使用したマルチサイト

私たちは、このような使命を受信した場合、例えば、簡単な公式サイトを開発し、唯一のダースのhtmlページ。プロジェクトは非常に簡単で、私たちはどんな大きなフレームを使用する必要はありませんが、あなたはわずか数伝統的なHTML、JSとCSSを記述する場合、これらの問題が発生するはずです：

• サイトのナビゲーションと、各ページのバナーの下には、再利用する方法、一般的なのですか？あなたはもはや使用した場合、その後、時間があまりにも愚かなことでしょう、nページの変化に伴って変化します
• 変更後にキャッシュを空にし、ユーザーを強制的にどのように？私たちは、手動で愚かなように、ブラウザのキャッシュをクリアするためにユーザーに要求することはできません
• 私はES6 JSの開発を使用すると、どのようにブラウザの互換性の問題を解決するために？
• 私はあまりCSSスタイルがどのように変換するために、開発された使いたいですか？

図から分かるように、パッケージ化なしの自動化ツールが参加していないが、我々はそうWebPACKのに不可欠を使用して、これらの問題を解決することが非常に困難です。

目標を達成するために、

、私はバーに行く感じないでたらめない、いくつかの学生が不安になることがあり、ここを参照してください、しないでください！レッツ・セットゴール！何をするにしても、彼らは乾燥するために、オペレータは、とても大きなアップグレードが存在することがない場所、それが目標に向かって途中で様々な問題を克服することであるのではなく、設定した目標に持って、我々はこれを作り、進歩を持っています足場の前に、私はそれがこれです願っています

• htmlファイル、すなわち、複数の入口をサポートし、ファイルやJS複数に包装することができます
• ファイル名は、ハッシュ値、解決キャッシュの問題に置くべきです
• ナビゲーションバーと下のバナーの頭のサイトを再利用することができます
• 以下を使用して書かれたスタイリング
• 開発をサポートするために、ES6
• ファイルディレクトリに基づいて自動設定に期待して、ページを手動で設定WebPACKの入り口を変更する必要はありません高めるためにそれらを使用し容易にするために、
• JS、CSSスタイルによって動的に挿入したくない、これは希望はいつものように、開発として、HTML CSSのアドレスに直接導入、ページのちらつきが発生します
• あなたは、リアルタイムでの開発の効果を見ることができます
• 圧縮コードを構築することが可能

まあ、ゴールセット、スタート

ディレクトリ構造

ない心配を行い、コード、良いカタログを書いて心配しないで、ストロークディレクトリを撫でてみましょうとして、次の私たちは明確な思考、私のディレクトリ構造があるしましょう

+ config                    //环境变量配置文件，开发模式和生产模式使用不同的环境变量，比如接口地址，开发环境用的接口域名是http://a.com，生产环境使用的是http://b.com
    - dev.env.js            //本地开发变量   
    - prod.env.js           //生产环境变量
+ src                       
    + css                   //自己的less组件或者第三方css库
         + component        //自己组件的less
         + lib              //第三方的css库，比如bootstrap
    + html                  //html代码，主要是一些模板，如头部导航，底部通栏，侧边栏
         + tpl              //模板文件
    + img                   //图片文件
    + js                    //自己的js组件库或者第三方js库
         + mod              //自己的js组件放这里
         + lib              //第三方js库
    + page                  //页面文件
         + index            //这个根据自己情况设置，有的页面相关性强，可以放到一个文件夹下，比如一个user文件夹，可以放个人中心的所有页面
             - index.html   //每个页面都要有一个html
             - index.js     //每个页面都要有一个js，名称和html的名称保持一致
             - index.less   //每个页面都要有一个同名less文件
          + test
             - test.html
             - test.js
             - test.less    
             
+ webpack                   //webpack的配置文件
     - dev-server.js        //开发服务设置，可以通过localhost访问页面，页面的实时编译
     - webpack.common.js    //开发环境和生产环境通用配置
     - webpack.dev.js       //开发环境特有的配置
     - webpack.prod.js      //生产环境特有的配置

最初のconfigディレクトリで、今私は主にいくつかの環境変数を入れて、開発環境と本番環境では、我々は地元のAPIインタフェースアドレスで開発された、このようなインターフェイスアドレスなどの異なる変数、ありさ、そして時間を梱包、生産環境を交換しますAPIアドレス。

WebPACKのディレクトリはwebpack.prod.jsでの生産にwebpack.common.jsに共通の構成を開発し、生産WebPACKの設定ファイル、webpack.dev.jsへのユニークな構成の開発、ユニークな設定が含まれています。

SRCのページディレクトリページファイルを置く当社のホームディレクトリを、開発、および異なっ通常よりも機能することができる、私は、HTMLのすべてのページ、JSファイルを使用し、以下にまとめ、一部の学生は、すべてのhtmlを置いてもよいですディレクトリに、ディレクトリへのJSが、このようなAの問題があるが、ページが変更され、我々はカタログに目を通す必要がありますたびに、非常に不便、私たちは一緒にこの関連性の高い文書を入れ、抽出すべきです種々の構成要素またはアセンブリCSS jsがページとは別に配置してもよいです。

githubの住所：HTTPS：//github.com/501351981 / ...

マルチエントリの設定

WebPACKのすなわち複数のエントリのjsファイルを指定した複数のエントリをサポートし、あなたは出力、複数のjsファイルは、HTMLをどのようにそれを行うにはできますか？私は、HTMLのWebPACK-プラグインプラグインを使用する必要性は、することができ、WebPACKの関連のjsファイルは自動的にライン上のhtmlの下に挿入され、SEOやその他の情報、開発プロセスは、このようなものです、私はHTMLでタイトルを設定することを願って、書き込みHTMLコンテンツコード、HTMLテンプレートファイル最終的なHTMLを呼び出すことで包装することができます。

インストールのhtml-WebPACKの-プラグイン

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

マルチ入口はwebpack.common.jsを配置しました

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={

    entry:[
        index:'../src/page/index/index.js',
        test:'../src/page/test/test.js'
    ],
    
    output: {
        filename: '[name].[hash].js',   //输出名称后面跟哈希值，解决缓存问题
        path: path.resolve(__dirname,'../dist')
    },

    ....
    
    plugins: [
      new HtmlWebpackPlugin({
         filename: 'index.html',
         template: '../src/page/index/index.html',
         chunks: ['index'],
      })
      
      new HtmlWebpackPlugin({
         filename: 'test.html',
         template: '../src/page/test/test.html',
         chunks: ['test'],
      })
    ]
}

このような問題を設定すると、毎回新しいページは、私が実際には、我々は自動的に入口構成に追加、SRC /ページ内のjsファイルを読み込むことができ、ここであまりにも多くの問題を、それを追加します。読み/ srcのページの下にすべてのHTMLファイルは、自動的に新しいHtmlWebpackPluginをインスタンス化することを呼び出します。

ディレクトリ内のすべてのファイル名を読んで、私たちはグロブを導入する必要があり、インストール

npm install --save-dev glob

改善の構成

const glob = require('glob')
const CleanWebpackPlugin = require('clean-webpack-plugin');

//多入口js的配置，读取src/page下所有的js文件
function entries() {
    let jsDir = path.resolve(__dirname, '../src/page')
    let entryFiles = glob.sync(jsDir + '/**/*.js')
    let map = {};

    for (let i = 0; i < entryFiles.length; i++) {
        let filePath = entryFiles[i];
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
        map[filename] = filePath;
    }
    return map;
}

//读取多个html模板，进行插件实例化
function newHtmlWebpackPlugins(){
    let jsDir = path.resolve(__dirname, '../src/page')
    let htmls = glob.sync(jsDir + '/**/*.html')
    let plugins=[]

    for (let i = 0; i < htmls.length; i++) {
        let filePath = htmls[i];
        let filename_no_extension = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
        let filename=filename_no_extension.concat('.html')
       plugins.push(new HtmlWebpackPlugin({
           filename: filename,
           template: filePath,
           chunks: [filename_no_extension],
       }))
    }

    return plugins
}


module.exports={

    entry:entries(),
    
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname,'../dist')
    },

    ....
    
    plugins: [
      ...newHtmlWebpackPlugins()
    ]
}

さて、今、新しいページが変更WebPACKの構成に必要としない、とだけ必要に再実行してNPMの実行開始へ

ヘッドとマルチプレックスの底があります。

ヘッドナビゲーションと生ローダまたはHTML-withimg-ローダーを使用する必要があり、我々はそれで別のhtmlのhtmlを導入する方法を、次に、すべて同じであるため、導入する必要がある各ページバナーの下

インストール生ローダは、生ローダは、元のファイルの内容をロードすることができる（UTF-8形式）

npm install --save-dev raw-loader

//目录结构

+ src                       
   
    + html                  
         + tpl              
             - navbar.html  //共用的头部导航  
             - footer.html  //共用的底部导航
    + page                  //页面文件
         + index            
             - index.html   
        
          + test
             - test.html

だから我々は、index.htmlを経由下部のバーを参照してナビゲーションすることができます

<!--引入通用的导航部分-->
<%=require('raw-loader!../../html/tpl/navbar.html')%>

<!--页面的正式内容在这里-->
<div id="app">
    <p>首页的内容在这里</p>
</div>

<!--引入通用的底部栏-->
<%=require('raw-loader!../../html/tpl/footer.html')%>

我々ので、最初は、私は解決策を探しています、私は記事が生ローダを使用することをお勧めしましたが、ローカルナビゲーション画像を参照することができないように、Aの問題があることを見出し、ナビゲーションはロゴ画像を引用したような、見つけることができません絵を梱包する際に解決し、私は、HTML-withimgローダに切り替え、画像のパスが作業をしないで直接にハッシュ値を再び追加するために処理、書き込みされます

名前が示すように、このプラグインは、写真でロードされたHTMLことができ、HTML-withimgローダーをインストールします。

npm install --save-dev html-withimg-loader

<!--引入通用的导航部分-->
<%=require('html-withimg-loader!../../html/tpl/navbar.html')%>

<!--页面的正式内容在这里-->
<div id="app">
    <p>首页的内容在这里</p>
</div>

<!--引入通用的底部栏-->
<%=require('html-withimg-loader!../../html/tpl/footer.html')%>

ところで、htmlの参照先は絵に書かれたアドレスに必要である、仕事のために必要とする必要性は、単に画像のアドレスを記入十分ではありません

<img src="${require('../../img/react.png')}" width="50" height="50">

サポートES6書き込みJS

私たちは今、ES6を学んだと信じていますが、ブラウザの互換性の観点からではなく、任意の法律では、プラグインのサポート、我々が最初にインストールが必要です

npm install --save-dev babel-loader babel-core babel-preset-env

WebPACKの設定を追加します。

webpack.common.js、我々は唯一のSRCディレクトリ変換をJS

{
    test: /\.js$/,
    use: {
        loader: 'babel-loader'
    },
    include: path.resolve(__dirname,'../src')
},

.babelrcという名前のプロジェクトディレクトリ内のファイルを追加する際に、バベルのセットは、ブラウザの最新バージョン2の1％以上のシェアをサポート

{
  "presets": [
    ["env",{
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ],
}

ES5の構文にバベルだけES6構文などの関数（）{}への矢印機能など、いくつかのES6固有の機能は翻訳しないため、そのような新しいMap（）のように、パッケージングするか、新しいマップ（）、我々はまだ必要後変換作業を完了するために、プラグインをインストールします。

npm install --save-dev babel-plugin-transform-runtime

ファイルを変更し.babelrc

{
  "presets": [
    ["env",{
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ],
  "plugins": ["transform-runtime"]    //引入插件
}

あなたは今ES6を利用するために自由に感じることができます

使用少ないの文体

まず、関連するプラグインをインストールしますか、

npm install --save-dev less less-loader css-loader style-loader

webpack.common.js設定

{
    test: /\.css$/,
    use:["style-loader","css-loader","less-loader"]
},

index.jsファイルでは、私たちは以下の導入を提出することができます

import './index.less'

htmlページ、動的にCSSスタイルのHTMLページに挿入index.jsを実行し、包装した後、これが問題の原因となり、ちょうど負荷はスタイルのHTMLで、CSSスタイルは、ページの輝きが得られ、jsの別のスタイルの後に挿入されています経験は良くありません（技術的にもユーザーエクスペリエンスああの追求、もののプロダクトマネージャーであるだけではなく）。それには2つのソリューションがありますが、最初のものは、私は、JSが装着されていない前に、ページ全体をカバーするために、ロードアニメーションを表示、完了し、第二は、HTMLの中にパッケージ化されたCSSファイルパスにある、JSによって動的に追加しないでくださいされて2番目のオプションを選択しました。

私たちは、あなたがプラグインエキス・テキストのWebPACK-プラグインを使用する必要があり、以下のファイルをCSSファイルにパッケージ化されている必要があります

npm install --save-dev extract-text-webpack-plugin

webpack.common.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports={
    rules: [
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader!less-loader"
            })

       },
    ]
}

plugins: [
   new ExtractTextPlugin("[name].[hash:8].css"),
]

このパッケージ後のHTMLは、このようなCSSファイルを紹介します

    <link href="index.5eb2501d.css" rel="stylesheet">

WebPACKの設定

私は内蔵0から始まるの過程で実際よ、この設定をWebPACKのことで、その理由は、最終的には、我々は簡単に私のWebPACKの構成を説明するの下、トランクの内容に影響を与えたくなかった置きます。

一般的なコンフィギュレーション・ファイルに重複した構成、すなわち、ローカル環境と生産を書くことではない公式の勧告をWebPACKの、そしてマージによってマージ

webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

const env=require("../config/dev.env")

module.exports=merge(common,{
    mode:"development",
    devtool: 'inline-source-map',
    plugins:[
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new OpenBrowserPlugin({ url: 'http://localhost:5000' })
    ],
})

私たちは見ることができWebPACKのマージによって共通設定webpack.common.jsと開発マージ、プラグイン

new webpack.DefinePlugin({
            'process.env': env
 }),

DefinePluginは、グローバル変数を定義しprocess.env

new OpenBrowserPlugin({ url: 'http://localhost:5000' })

このプラグインは、私たちは、NPMの実行開始を可能にした後、自動的にページを開いている// localhostを：HTTP：5000を避けるには毎回手動を開きます。
WebPACKの-devのサーバーは、私はDEV-server.jsに入れて、私たちはリアルタイムの開発、Webサーバの設定で結果を見ることができるように、簡単なWebサーバーを提供してくれますし、リアルタイムに再ロードすることができます

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.dev');
const options = {
    contentBase: './dist',
    hot: true,
    host: 'localhost',
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
    console.log('dev server listening on port 5000');
});

package.jsonでは、我々は2つのスクリプトを追加します

"scripts": {
  "start": "node webpack/dev-server.js",
  "build": "npx webpack --config webpack/webpack.prod.js",
},

我々は2本のコマンドラインを入力することができるように

NPMの実行開始：開発モードに入ります

NPM実行ビルド：包装の生産・コード

基本的に私は、この足場の導入が終わったんまあ、見しようとする自分自身を理解する真の必要性が一つのことで、それは別の問題であること、他の人はそれを理解することはより困難であると言う、そしてフロントエンド道は長いです、我々はそれをしようとします。

githubの住所：HTTPS：//github.com/501351981 / ...

足場が完璧ではないが、基本的なことに、私は、このような共同開発VUEのマルチページやモバイル端末H5の開発など、いくつかの後ろの足場を、行います、我々は集中し続けることができます興味を持っています。