簡単なwebpack構築ツールの構成と常用プラグインのまとめ

webpack構築ツールはもう何年も燃えています。今の便利な構築ツールでもあります。勉強しない理由はありません。webpackを選んだからには、時代に合わせて歩きます。私たちは大牛の歩みに従います。大牛などは私を待っています。
一、webpack基礎

ルートディレクトリでnpm initコマンドを使ってpackage.jsonを作成し、作成中に一緒に車に戻ります。

ローカルインストールwebpackコマンド：npm install webpack webpack-cli--save-devインストールが成功したらpackage.jsのdevDependenciesに書き込み、npm node_を通過することができます。modules/.bin/webpack-vコマンドはそのバージョンを確認します。

グローバル実装npm install-g webpackはグローバルインストールwebpackを推奨しません。これはあなたのプロジェクトをグローバルにインストールしたバージョンにロックし、異なるwebpackバージョンの構築に失敗する可能性があります。

静的リソースファイルディレクトリ

C src[プロジェクトソースファイルディレクトリ]

C dist[パッケージファイルディレクトリ]

C webpack.co nfig.js[webpackプロファイル]

C package.json[NPMパッケージ管理プロファイル]

C node_modules[プロジェクト中の依存保存ディレクトリ]

二、webpack.co nfig.js

const webpack = require('webpack');
module.exports = {
 mote:"development",//      
 /*
 development：    
 production:    
 none:      
 */
 //    ，             
  entry: './src/index.js',
  /*
  hot              ，devServer                               ，    hot ，
                               。
      hot：true               webpack.HotModuleReplacementPlugin            ，     
         package.json scripts    
  "scripts": {
   "start": "webpack-dev-server --hot --inline",
  },
  */
  //      
  devServer: {
   hot: true, //                   npm run start
   port:"8080",//    8080,      
   host:"192.168.xx.xx",
   /*
   host  devServer       ，     localhost          192.168.xx.xx/index.html
        package.json     
   "scripts": {
   "start": "webpack-dev-server --hot --inline ",
   },
   */
   
  },
  //  
  plugins: [
   //     
   new webpack.HotModuleReplacementPlugin(), 
  ],
  //  
  output: {
   //filename：      ，         
   filename: '[name].bundle.js',
   //path，              
   path: path.resolve(__dirname, 'dist')
  }
 };
 

三、プラグイン
1、HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
  new HtmlWebpackPlugin({ //     HTML
   title: 'Hello World',//     
   minify: { //minify       html       
    removeComments: true, //   HTML    
    collapseWhitespace: true, //          
    minifyCSS: true, // //    html  css    false；
    caseSensitive: true, //        ，  false
    ollapseWhitespace: true, //      ，  false
    minifyJS: true, //    html  js
    removeAttributeQuotes: true, //            false
    removeComments: true, //         false
    emoveCommentsFromCDATA: true, //              false
    emoveEmptyAttributes: true, //       ，  false
    removeRedundantAttributes: true, //       
    removeScriptTypeAttributes: true, //  script     ， h5  script type   ：text/javascript    false
   },
   filename: 'index.html', //   html     
   template: 'index.html', //html        
   hash: true,//hash       js       hash ，    false       html  js    
   // <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>
  }),
 ]
 

2、Cleean WebpackPlugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  //           webpack dist          
  new CleanWebpackPlugin()
]
 

公式紹介：
By default、this plugin will remove all files inside webpack's output.path directory、as well as all unused webpack ass after everry success ful rebuild
3、Extract TextWebpackPlugin
まず必要なものをダウンロードしてください。

npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev

まずwebpackを設定して、先にプラグインを使わないで完成します。

module.exports = {
 module : {
    rules: [
      {
        test: /\.css$/,
        use:[
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

設定が終わったら、js入り口のファイルにスタイルファイルを導入して、包装して包装結果のbundle.jsを確認します。cssはjsの中に包装されていて、文字列の形で存在しています。index.htmlにパッケージ化されたbundle.jsを導入したら、ブラウザを使ってindex.ファイルを開けば、cssがstyleとしてheadに挿入されていることが分かります。
2.プラグインの使用

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 module : {
  rules: [
    {
      test: /\.css$/,
      use : ExtractTextPlugin.extract({
       fallback: "style-loader",
        use: "css-loader"
      })
    }
    /*
  use:        loader     
  fallback:       loader   css  
  */
   ]
 },
 plugins: [
   new ExtractTextPlugin("styles.css"),
   new HtmlWebpackPlugin({ //   HtmlWebpackPlugin     
      title: 'extract-text-webpack-plugin',
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      inject : 'head'
    })
 ]
}

以上の内容が配置されてから包装して調べたら、cssファイルはlink方式でindex.のheadに引用されていることが分かります。期間中はHtmlWebpackPluginプラグインに合わせてindex.を自動的に挿入します。
ここでは、簡単なwebpack構築ツールの構成と一般的なプラグインのまとめについての記事を紹介します。webpack構築ツールの構成と一般的なプラグインの内容については、以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。