webpack4.x

WebPACKの

モジュールのパッケージングツール、プロジェクト構造解析、言語JSモジュールを見つけて、いくつかのブラウザはES6 / SASSなどとして実行され、ブラウザが使用するときのためになぜ、パッケージ形式にそれらを変換することはできません。

パッキング：一つのファイルにパッケージ化のjsファイルを複数、およびダウンロード帯域幅は、サーバーの圧力を減らすために、

翻訳：ブラウザが正しく識別できるように、ブラウザは、JSに言語を認識しません。

最適化：パフォーマンスを向上させるために最適化プロジェクト

インストール

  // 新建项目文件夹，并进入
  mkdir webpack_demo
  cd webpack_demo
  //全局安装
  npm install -g webpack

  // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等）
  npm n init
  // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用；
  npm install --save-dev webpack
  // 查看webpack版本
  webpack -v
  // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli
  npm install --save-dev webpack-cli -g

デモ

ルートディレクトリの下にsrcフォルダを作成し、DIST、基本的なプロジェクト構造を確立

SRC：JavaScriptコードを格納

DIST：ブラウザがファイルを読み込み、保存するために使用され、ファイルパッケージのWebPACK

ディスト手動で新しいフォルダのindex.htmlを作成し、コードに書かれました
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>jspang webpack</title>
 </head>
 <body>
     <div id="title"></div>
     <script src="./bundle.js"></script>
 </body>
 </html>
ここでは、文書を生成し、その後のWebPACKのパッケージは、ファイルが導入されていないbundle.js。

SRCのentry.jsのエントリファイルの設立：
  document.getElementById('title').innerHTML='Hello Webpack';
WebPACKのパッケージは、パッケージングのWebPACKのsrc / entry.jsの./dist/bundle.jsをwebpack3.xが、パッケージをwebpack4.xサポートしていません
 // 报错信息
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
package.jsonでスクリプトを増加させるためにソリューション：
"dev": "webpack --mode development",
"build": "webpack --mode production"
実行ビルドmain.jsは、ルートディレクトリに入力ファイルと出力ファイルを設定し、出力ファイル名は、出力bundle.jsとして、変更する必要がある場合、あなたは新しいwebpack.config.jsファイルを作成することができ、distのフォルダにパッケージファイルを作成NPM状況
  const path = require('path')
  module.exports = {
      entry:'./src/entry.js',
      output:{
          path:path.resolve(__dirname, 'dist'),
          filename:'bundle.js'
      },
      mode:'development'
  }
NPMの実行ビルドを実行し、こんにちはWebPACKのを確認するには、ブラウザでindex.htmlをを開きます

プロフィールwebpack.config.js

webpack.config.jsはWebPACKの設定ファイルは、ファイルを手動でそれを構築し、設定する必要があり、プロジェクトのルートディレクトリで、次の構成テンプレート：
~~~
module.exportsは= {
CI //エントリファイルの
エントリ：{ }
//エクスポートファイルの設定項目の
出力は：{}、
//モジュール：画像を変換する方法、例えばCSSの解釈、圧縮
Module1の：{}、
//プラグ、テンプレートおよび機能の生産のための
プラグイン：[]、
/ /構成WebPACKの開発サービス
devserver：{}
}
~~~

  // 入口文件的配置项
  entry:{
      //里面的entery是可以随便写的
      entry:'./src/entry.js'
  }

// 出口配置是用来告诉webpack最后打包文件的地址和文件名称的
output:{
    //打包的路径位置，path.resolve(__dirname,’dist’)获取项目的绝对路径
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
    
}

PS：私はパスを導入覚えて、それ以外の場合は、パスを見つけることができない、あなたは解決方法を使用することはできません

  const  path  =  `require`('path');

マルチ入力 - マルチ出口構成

  const path = `require`('path');
  module.exports={
      // 入口文件的配置项
      entry:{
          entry:'./src/entry.js',
          // 又引入了一个入口文件
          entry2:'./src/entry2.js'
      },
      // 出口文件的配置项
      output:{
          // 输出的路径，用了Node语法
          path:path.resolve(__dirname,'dist'),
          // 输出的文件名称
          // [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
          filename:'[name].js'
      },
      // 模块：例如解读CSS,图片如何转换，压缩
      module:{},
      // 插件，用于生产模版和各项功能
      plugins:[],
      // 配置webpack开发服务功能
      devServer:{}
  }

プロフィール：サービスとホット・アップデート

WebPACKの-devのサーバー提供

WebPACKの-devのサーバー最初のNPMを実行するには、-save-devのWebPACKの-devのサーバーをインストールし、それを構成するdevServer

  // webpack.config.js
  devServer:{
          //设置基本目录结构
          contentBase:path.resolve(__dirname,'dist'),
          //服务器的IP地址，可以使用IP也可以使用localhost
          host:'localhost',
          //服务端压缩是否开启
          compress:true,
          //配置服务端口号
          port:1717
  }

contentBase：基本的な構成サーバーアドレスパッケージを見つけるために、パスを実行しています。

ホスト：アドレスサービスが実行されている、それはマシンのIPを使用することをお勧めします。

圧縮：圧縮サーバーの選択は、一般的に上に設定されています。

ポート：ポート運用サービス。

  // --save-dev 本地安装并保存到package.json
  npm install webpack-dev-server --save-dev

  // package.json 
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }

そして、package.jsonコマンドスクリプトフォルダに追加します。

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

実行NPMの実行サーバ、成功した後、ブラウザでhttpを開く：// localhostを：1717 / index.htmlをあなたが見ることができる、対応するコンテンツ

NPMの実行サーバーが起動したら、それは（も時計と呼ばれる）の監視メカニズムがあります。それは私たちがソースコードを変更監視、および私たちは、ブラウザで直ちに更新与えることができます。

webapck-DEV-serverパッケージのWebPACKのは、ファイルまたは変更のエントリファイルのエントリが導入されたときに、他のファイルは、WebPACKの自動エントリファイルをコンパイルしながら、その後、ページ全体を更新し、開発用サーバを起動します。PS：HTMLやスタイルは、自動的にページを更新していない変更は、手動で結果を確認するために更新する必要があります。ウィンドウズ

HTMLは変更を更新問題が解決しない：プラグインNPMの使用は--save-devのHTML-WebPACKの-プラグインをインストール

  // webpack.config.js

  var HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins:[
        new HtmlWebpackPlugin({template: './dist/index.html'})
    ],

モジュール：CSSファイルのパッケージ

異なるローダを使用することにより、WebPACKのプロセスは、異なるファイル形式に特異的であってもよい
ローダー構成：

試験：ドキュメントのマッチング処理の拡張のための発現。

使用：ローダー名、使用するモジュールの名前を。

包含/除外：ファイルは手動で（フォルダ）を添加扱われなければならない、またはブロック（フォルダ）処理されない（オプション）。

クエリ：ローダーとして追加の設定オプション（別売）を提供します。

SRC /では、CSSのフォルダを構築し、ファイルやindex.cssを構築

  #title{
      font-size: 20px;
      color:red;
  }
  body{
      background-color:gainsboro;
  }

CSSファイルをセットアップした後、ファイルの入口に導入される必要があり、それは、パッケージentry.jsでここに導入することができます。コードの最初の行に追加さ/src/entery.js。

  import css from './css/index.css';

CSSファイルの解析ローダー、スタイル・ローダー--save-devのNPMインストールスタイル・ローダーをインストールNPM（スタイルタグページに挿入されたCSS）、およびローダー-CSS（ファイルのURL（）などを処理するためのCSS）を使用 - 保存-DEV CSS-ローダー

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

  module:{
          rules:[
              {
                  test:/\.css$/,
                  loader:['style-loader','css-loader']
              }
          ]
  },

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

PS：リフレッシュ自動的にCSSを変更するには、この時、これら三つを書き込むことができます

プラグイン構成：構成JS圧縮

uglifyjs-のWebPACK・プラグイン（JS圧縮プラグインを再度インストールすることなく、WebPACKの集積uglify呼ばれています。

const uglify = `require`('uglifyjs-webpack-plugin');

plugins:[
        new uglify()
    ],

PS：devServerとJS圧縮は、今回の実行エラーで紛争につながります

プラグイン構成：HTMLファイルを公開

jsの競合をdevServerと圧縮

開発環境は、我々は、エラー行番号とエラーメッセージの明確なプレビューを開発する必要がある場合、JSを圧縮していないが不可欠であるので、JavasScriptコードを圧縮する必要はありません。本番環境では、プログラムの効率をスピードアップするために使用されるJSコードを圧縮します。本番環境での開発環境のdevServer、およびJS圧縮は、開発環境で本番環境を作る事がとてもWebPACKの競合エラーを設定します。

HTMLファイルのdistの下のsrcディレクトリのファイルにカットし、導入JSを削除し、WebPACKのは自動的につながる
webpack.config.jsに組み込まれたHTML-のWebPACK -プラグインのプラグをしてNPMインストールインストール--save-devのHTML-WebPACKの -plugin

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

プラグインのプラグインでに設定されwebpack.config.js

  new htmlPlugin({
              minify:{
                  removeAttributeQuotes:true
              },
              hash:true,
              template:'./src/index.html'
            
  })

縮小化：htmlファイルが圧縮され、removeAttrubuteQuotesは属性二重引用符を削除することです。

ハッシュ：ハッシュが効果的にキャッシュJSを防ぐことができ、参加するよう、開発を行うためにキャッシュがJS。

テンプレート：HTMLテンプレートは、パスとファイル名をパックすることです。

端末で使用されるのWebPACK、パッケージ化。index.htmlファイルは、当社のdistディレクトリにパックされた参照、およびJSファイルと自動的にエントリー紹介することができ
、パッケージのhtmlファイルを効果的にどのような構成で明確にすることがWebPACKの構成で、開発ディレクトリやカタログ制作を区別することができます開発環境を設定されている本番環境で、構成の競合両方の環境を避けます

画像処理におけるCSS

SRCでの画像のindex.htmlファイルで導入されたsrcディレクトリの下に新しいIMGSフォルダ、実行エラー、解決ローダーの欠如、ファイルローダおよびローダーURLインストール
NPMが--save-DEV-URLファイル・ローダーローダーをインストール

ファイルローダ：問題は、CSSの背景の導入を解決するために、基準経路は、WebPACKの各モジュールが代わりに配置されて、元のCSSファイルの相対的なURLのHTML入口経路の様式で、一つのファイルにパッケージ化され、ピクチャの導入をもたらします失敗、ファイルローダ溶液を使用することができる、ファイルローダが構成画像に応じて、URLに組み込まプロジェクトを解析することができる適切なパスにコピーされてもよい、パケットファイルが正しいファイルを指すように、基準経路を改変しました

URL-ローダーます：httpたくさんの写真がページのパフォーマンスが低下、要求の多くを送信します、あなたが解決のurl-ローダーを使用することができます。絵のurl-ローダは文字のファイルにパック、その後、文字の文字列（BASE64）にデータを変換するために同等のdataURIを生成するために導入されるコーディング、これだけ、この文書を導入する必要がある画像にアクセスすることができます。画像が大きい場合、符号化性能を消費し、URLローダが制限パラメータを提供し、コピーするファイル・ローダーの使用よりも大きいDataURIにバイトのファイルよりも小さいです

URL-ローダーは、ファイル・ローダーをカプセル化し、それは単にURLローダーに導入することができます

 //模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

テスト:. /（PNG | JPG | GIF）/画像ファイル名の接尾辞に一致します。

使用：ローダーローダーを使用して、指定された設定パラメータを。

制限：ファイルがJSを書く、ラベル500000B Base64形式よりも小さくなっています。

1.ファイルサイズがファイルDataURL（Base64形式）に置かれる限界パラメータ、URLローダ未満です。

2.ファイルサイズが制限値を超えている場合、url-ローダーは、処理パラメータのためのファイル・ローダーを呼び出すファイル・ローダーに直接でもあります

画像処理経路から分離CSS

JavasScriptは、CSSコードから分離しました

どのようにCSS間違った問題の画像に分離されたパスに対処します。

CSS分离：エキス・テキストのWebPACK-プラグインNPMインストール--save-devの抽出-テキストのWebPACK-プラグイン
~~~
constのextractTextPlugin =必要（ "抽出・テキストのWebPACK-プラグイン"）;
//设置プラグイン
の新しいextractTextPlugin（ "/ CSS / index.css"）

//ここでのパスが位置を分離されている/css/index.css。この設定が完了したら、ラッパーコードは：また、当社独自のスタイル・ローダーとCSS-ローダーを変更します。
モジュール1：{
ルール：[
{
テスト：/.css$/、
使用：extractTextPlugin.extract（{
フォールバック： "スタイルローダ"、
使用： "CSS-ローダー"
}）
}、{
テスト:. /（PNG | JPG | GIF）/、
使用：[{
ローダー： 'URLローダ'、
オプション：{
限界：500000
}
}]
}
]
}、
~~~

画像のパスの問題：
publicPathは：出力オプションwebpack.config.jsファイルであり、主な役割は、静的なファイルパスに対処することです。
治療の前に、我々はウェブサイトと呼ばれる、オブジェクトの上に声明をwebpack.config.js

var website ={
    publicPath:"http://本机或devServer配置的ip:1717/"
}

次に、出力オプションで、このオブジェクトのpublicPathプロパティを参照。

//出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js',
        publicPath:website.publicPath
    },

HTMLの画像を処理

HTML-withimgローダは、私たちは、HTML内の画像を紹介する良い取引することができ

  "scripts": {
    "server": "webpack-dev-server --open",
    "build":"webpack"
  },

直接実行ビルドがすなわち世界的に使用WebPACKの完全なパッケージをコマンドNPM使用することができます。

指定したフォルダに画像を配置する方法：URLローダの設定オプション

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:5000,
                       outputPath:'imgs/',
                   }
               }]
            }
          ]
    },

outputPath：画像サイズが限界値よりも小さい場合、画像は、文字列を生成する画像処理を用いない限界値よりも大きくない場合は「IMGS /」、Base64形式で生成された画像は、ラベルは、IMGSフォルダDISTを生成しません、代わりに写真をコピーするファイル・ローダーの方法を使用しての、この時点でIMGSは画像参照パスをフォルダや調整が生成されます;
PS：上限を設定していないとき、制限はデフォルト値が付属しています

HTML-withimgローダをインストールHMTLファイルNPMにラベルを導入する問題を解決するために、HTML-withimgローダー--save

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

以下のファイルをパッケージ化と分離

NPM --save-DEVレスNPMをインストールするのn --save-devの少ないローダインストール
ローダーを配置：

  {
      test: /\.less$/,
      use: [{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          }, {
              loader: "less-loader" // compiles Less to CSS
          }]
  }

// 分离
{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

パッケージ化と分離SASSファイル

NPMは、nノードSASS NPM --save-DEVは--save-DEV SASSローダーをインストールするインストール

{
    test: /\.scss$/,
    use: [{
         loader: "style-loader" // creates style nodes from JS strings
        }, {
         loader: "css-loader" // translates CSS into CommonJS
        }, {
        loader: "sass-loader" // compiles Sass to CSS
     }]
}

// 把SASS文件分离
{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

でentery.jsするSASSファイルを導入することを忘れないでください。

自動処理属性の接頭辞CSS3

// 属性前缀
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);

ブラウザの互換性は、-webkitを追加し、-ms、-o、これらの接頭辞を-moz。PostCSSは、接頭辞の関数として、それはより多くの機能を実現するために、あなたのCSSを助けることができる、CSSの処理プラットフォームである
（自動的に接頭辞プラグインを追加する）あなたは二つのパッケージpostcssローダとautoprefixerをインストールする必要が
NPMがインストール--save-devのpostcss -loader autoprefixer
postCSSは、（と同じレベルをwebpack.config.js）プロジェクトのルートディレクトリにpostcss.config.jsファイルの設立をお勧めします

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

{
      test: /\.css$/,
      use: [
            {
              loader: "style-loader"
            }, {
              loader: "css-loader",
              options: {
                 modules: true
              }
            }, {
              loader: "postcss-loader"
            }
      ]
}

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}

未使用のCSSをなくします

私はpurifycss-のWebPACKのpurifycssを-D npmn使用PurifyCSS CSSを大幅に冗長性を減らすことができ
、チェックHTMLテンプレートを同期する必要がある、あなたはグロブを使用してノードオブジェクトを導入する必要があります。グロブファイルヘッダwebpack.config.jsの中に組み込まpurifycss-WebPACKの
CONSTザは、グロブを必要とする=（ 'グロブ'）;
CONST = PurifyCSSPlugin（ "purifycss-のWebPACK"）を必要とします。

plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
        
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
 
]

パスは、主に必要なHTMLテンプレートを見つけるために、purifycssこの構成によれば、あなたのファイルを横断し、CSSが使用されているものを見つけるでしょう。

バベルのサポートを高めるためのWebPACK

バベルは、そのコア機能はバベル・コアパッケージと呼ばれるNPMに位置しているいくつかのモジュラーパッケージで、一緒にそれぞれの機能のために使用彼らの異なるパッケージを置くか、あなたが必要なものを展開することができWebPACKのは、あなたが別々にインストールする必要がありますパケット（最も使用される分析ES6のバベル・プリセット・es2015 JSXパケットのものであり、パッケージバベル・プリセット・反応を解析します）。
cnpm --save-DEVバベルコアインストールバベルローダバベル・プリセット・es2015をバベル・プリセット・反応

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

今正式に、そのバベルプリセット-ENVを推奨NPMのn --save-devののバベル-プリセット-ENVをインストール
して、設定ファイルに.babelrc変更します。実際には、限り、それにENVに以前es2015として。

{
    "presets":["react","env"]
}

PS：私は、問題はまだ正常なああではないかわからないエキス・テキストのWebPACK - プラグインのバージョン

リファレンス＆感謝：

https://jspang.com/posts/2017/09/16/webpack3.html（強く推奨ああ）
https://www.jianshu.com/p/c094e42b0bc2
https://blog.csdn.net/xum222222/article /詳細/ 79889793

webpack4.x使用