フロントエンドエンジニアリング--webpack 4.xの基本構成:基本リソースのパッケージング、ES 6変換、ホット・アップデート

Webpackはwebフロントエンドで現在最も流行している造化構築ツールである.フロントエンドの各種資源を自動的にパッケージ構築することができ、詳細は公式サイトに見ることができる.https://doc.webpack-china.org/
この記事では、フロントエンドのエンジニアリングの過程で、必要なwebpack構成について基本的な紹介を行い、html、css、sass、js(ES 6対応)、imagesを自動化し、ホットアップデートを実現する独自の構成を示します.
一.基本取付
1.nodeをインストールする.js
公式サイトのダウンロードアドレス:https://nodejs.org/en/.ダウンロードが完了したら、バカなインストールを行います.
2.プロジェクトルートディレクトリ新規package.jsonファイルは、添付2の内容をコピーする.(プログラムをD:/projectに入れると、プロジェクトルートディレクトリはD:/projectになります)
3.プロジェクトのルートディレクトリの下にwebpackがない場合.config.jsファイル、空の同名ファイルを新規作成し、ルートディレクトリに配置します.添付1の内容をコピー
4.プロジェクトルートの下に新規作成する.babelrc、添付3の内容をコピーします.
5.コマンドラインに入り、Windowsの下で同時にWindows+Rを押し、cmdを入力し、車に戻る
D:/projectの下に入るなど、プロジェクトディレクトリ(以下、ローカル、つまりプロジェクトディレクトリに入る)に入ります.
コマンドライン入力D:リターン
コマンドライン入力cd projectリターン
6.コマンドライングローバルインストールwebpack:コマンドライン入力、リターン
        npm i webpack -g
7.node-sassをローカルにインストールします.このパッケージはnpmインストールを実現できません.インストール方法は以下の通りです.
(1)node-sassのgithubホームページへのダウンロード:https://github.com/sass/node-sass/releases
自分のオペレーティングシステムのnode接尾辞のバージョンを選んで、例えばwindows 32ビットオペレーティングシステムで、ダウンロードします
    win32-ia32-57.Node、プロジェクトルートディレクトリにファイルを配置
(2)コマンドライン実行
    npm i node-sass--save-dev --sass_binary_path=./win32-ia32-57.node,
このインストールが完了すると、npm i-–save-dev node-sass方式でインストールできます.
8.現在のディレクトリ、コマンドライン実行npm i
二.実行、リアルタイム更新方法
コマンドラインが現在のディレクトリに入る、npm startを実行する、などのコマンド実行が終了し、プロンプトに従ってブラウザで該当アドレスを開く.ブラウザに該当するページが表示され、コードでhtmlまたはcssまたはjsを変更し、保存した後、ブラウザで直接結果を表示できます.
 
三.パッケージ化、オンラインパブリッシュ
コマンドラインは、現在のディレクトリに入る、npm runbuildを実行する、すなわち、現在のディレクトリの下でdistディレクトリを生成する.中のファイルが公開されます
 
四.注意事項:
1.入口jsはsrc/js/indexである.js
2.元のhtmlファイルからの削除とラベル
3.cssファイルの導入方法
src/js/index.jsに導入
例:
    import ‘../css/normalize.css’
     import ‘../css/default.css’
導入順序は最終cssがhtmlに導入する順序に影響する
4.エントリjsに他のjsファイルを導入する方法
ここではES 6のimportとexportの詳細を参照することをお勧めします.
    http://es6.ruanyifeng.com/#docs/module
五.最終的な効果:
元のディレクトリはsrcで、以下に大量のcssとjsファイルが含まれています.
パッケージ化後はdistディレクトリで、パッケージ化後のcssとjsファイルが含まれています.
付1:webpack.config.js内容:

const path =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('css/[name]-css.css');
const extractSASS = new ExtractTextPlugin('css/[name]-sass.css');
//     dist  
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports={
    entry:'./src/js/index.js',//  JS
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use: extractCSS.extract({                     
                      use: "css-loader",
                      fallback: "style-loader"
                })


            },
            {
                test:/\.scss$/,
                use: extractSASS.extract({
                    use: [
                        {loader: "css-loader"}, 
                        {loader: "sass-loader"}
                    ],
                    fallback: "style-loader"
                })
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory:true//  
                    }
                }
            },
            { //  css    
               test: /\.(png|jpg|gif|jpeg)$/,
               use: [
                 {
                   loader: 'url-loader',
                   options: {
                     limit: 8192,  //  8KB, base64  
                     name:'img/[name].[ext]',     //     
                     publicPath:'../'    //        ,   
                   }
                 }
               ]
             }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(
        {          
            template: './src/index.html',//               
            filename: 'index.html'
        }
        ),
        new CopyWebpackPlugin([
            {from:'./src/img',to:'./img'}
        ]),
        extractCSS,
        extractSASS,
        new CleanWebpackPlugin(['dist','build'],{
            verbose:false,
            exclude:['img']//   img    
        })
    ]


}

 
附2:package.jsonコンテンツ

{
 "name": "webpack-test",
 "version": "1.0.0",
 "description": "null",
 "keywords": [],
 "author": "py",
 "scripts": {
  "dev": "webpack-dev-server --mode development",
  "start": "npm run dev",
  "build": "webpack --mode production"
 },
 "devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.1",
  "clean-webpack-plugin": "^0.1.17",
  "copy-webpack-plugin": "^4.5.1",
  "css-loader": "^0.28.8",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "file-loader": "^1.1.11",
  "html-webpack-plugin": "^3.0.6",
  "node-sass": "^4.8.3",
  "sass-loader": "^6.0.6",
  "style-loader": "^0.20.3",
  "url-loader": "^1.0.1",
  "webpack": "^4.2.0",
  "webpack-cli": "^2.0.12",
  "webpack-dev-server": "^3.1.1"
 },
 "dependencies": {}
}

付3:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

 --ByPY