2019-12-20

1.webpackアプリケーションの例
#1.1.クイックハンド
プロジェクトの初期化

mkdir webpack-demo
cd webpack-demo
npm init -y

Webpackのインストール

npm i [email protected] [email protected] -D

ゼロ構成はwebpackを使用し、webpack制約ソースファイルディレクトリはsrcでなければなりません.デフォルトの構成ファイルはsrc/index.jsです.
新しいディレクトリは次のとおりです.

webpack-demo
├── node_modules
├── src
|   ├── index.js
|   └── module1.js
├── package.json
├── package-lock.json

index.js

const fn1 = require("./module1")
fn1()

module1.js

function fn1() {
  alert(1)
}
module.exports = fn1

うんてん

npx webpack

注:npxはnpmのパッケージランナであり、npm 5.2バージョン後に提供されるツールであり、プロジェクトの下にnode_が自動的に見つかります.modules/.binの関連コマンドで実行
次に、package.jsonにコマンドを実行します.

"scripts": {
    "dev": "webpack --mode development"
},

構成が完了すると、npm run devを使用してwebpackコマンドを実行できます.注意:modeはwebpackのモードで、開発モードと生産モード(production)があります.
1.2.カスタムプロファイル
前にwebpack 4のゼロ構成で実行されているプロジェクトを使用していましたが、より多くの機能を実現する必要がある場合は、ポータルファイル名を変更したり、各種loader、プラグインを使用したりすることができます.webpackのプロファイル名は通常固定されています.すなわち、webpack.config.jsは、このファイルに書かれています.そのため、プロジェクトルートディレクトリの下にこのファイルを作成する必要があります.

//   nodejs path       
const path = require("path")
module.exports = {
  //     
  mode: "development",
  //               
  entry: path.resolve(__dirname, "./src/index.js"),
  //     
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist")
  }
}

プロファイルにモードが設定されているのでpackage.jsonではmodeというパラメータを入力する必要はありません

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

#1.3.プロファイルの分割
一般的に、私たちの環境は開発環境と生成環境に分けられます.コードは開発段階と生成環境への配置が少し違います.そのため、私たちはこの2つの環境配置の中で異なる配置をそれぞれ異なるファイルに書きたいと思っています.このように区別しやすく、メンテナンスしやすく、2つの環境を同じ配置にしたいと思っています.基本プロファイルに入れるので、少なくとも3つのファイルに分割します.
分割後、私たちのディレクトリは次のようになります.

webpack-demo
├── build
|   ├── webpack.base.js
|   ├── webpack.dev.js
|   └── webpack.prod.js
├── node_modules
├── src
|   ├── index.js
|   └── module1.js
├── package.json
├── p

開発環境と生産環境をどのように区別しますか?Webpackを実行するとき、環境パラメータを追加すると、プロファイルで取得できます.たとえば、次のようになります.

  "dev": "webpack --env.development"

上の実行コマンドに追加されました.--env.developmentというパラメータは、プロファイルで取得できます.取得方法は次のとおりです.

//              ，           ，                  
module.exports = function(env) {
  // { development: true }
  console.log(env)
}

以上の知識点に基づいて、開発モデルと生産モデルを区別する手順は以下の通りです.

1.   webpack              --env.development || --env.production

2.  webpack      (webpack.base.js)        

3.                  webpack.dev.js           webpack.prod.js

build/webpack.base.js

const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
//   ：          npm i webpack-merge -D              
const merge = require("webpack-merge")
module.exports = function(env) {
  const isDev = env.development
  const base = {
    entry: path.resolve(__dirname, "../src/index.js"),
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "../dist")
    }
  }
  if (isDev) {
    return merge(base, dev)
  } else {
    return merge(base, prod)
  }
}

build/webpack.dev.js

module.exports = {
  mode: "development"
}

build/webpack.prod.js

module.exports = {
  mode: "production"
}

注意:実行時にプロファイルを指定し、--configで指定プロファイルを実現します.
package.jsonでの構成

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --env.development --config ./build/webpack.base.js"
  },

上の--env.developmentを--env.produtionに変更して効果を試してみてください