Webpackスタート

GitHubはDemoを勉強します.

フォルダを探してnpmプロジェクトを初期化し、依存をインストールします。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

npm scriptの追加

"scripts": {
	"build": "webpack --config webpack.config.js"
}

基本的な使い方

プロジェクトにファイルを追加

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

# ./index.html


  
    
    
    "https://unpkg.com/[email protected]"</span>>
  
  
    "./src/index.js"</span>>
  


# ./src/index.js
function component() {
  let element = document.createElement('div');

  // _   lodash js    
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

さらに、パッケージをプライベートとしてマークし、package.jsonオプションを削除するために、mainファイルを調整する必要があります.これは、コードが予期せぬ公開にならないようにするためです.

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

この例lodash依存性はによって され、 でグローバル である.これはいくつかの をもたらします.

は に しない.

が われたり、 った が されたりすると、プログラムは に しません.

が まれているが されていない 、ブラウザは として なコードをダウンロードします.

たちはこうすべきです

Bundle

を するには、 のようにします.

npm install --save lodash

# src/index.js

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

Configuration

Webpackプロファイルwebpack.config.jsをプロジェクトのルートディレクトリに します.node jsを してプログラミングします.

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

npm run build

#  
npx webpack --config webpack.config.js

# --config   webpack.config.js  。 ，  webpack  

プロファイルは、 なCLIよりも があります.この では、ローダルール、プラグイン、 オプション、その の くの を できます. については、ドキュメントを してください.
tips:npm run buildコマンドとパラメータの に2つのダッシュを することで、カスタムパラメータをwebpackに すことができます.

npm run build -- --colors.

NEXT

な が したら、 のガイドassetsアセット に して、Web packを して やフォントなどの リソースを する を する があります.
:https://juejin.im/post/5c8a2243f265da2dbe0327e3