摘要：學習實踐第一天安裝參考文檔中文文檔安裝篇中文文檔創(chuàng)建文件夾并且進入創(chuàng)建的文件夾初始化一個新的文件，使用跳過詢問階段。查看目錄結(jié)構(gòu)接下來按中文文檔安裝篇教程演練。中文文檔對該實例的說明在此示例中，標簽之間存在隱式依賴關系。

By Ylise

參考文檔：

1.webpack中文文檔安裝篇

2.Lodash中文文檔

1.創(chuàng)建文件夾 mkdir webpack-demo 并且進入創(chuàng)建的文件夾

mkdir webpack-demo && cd webpack-demo

2.初始化一個新的package.json文件，使用npm init -y跳過詢問階段。接下來使用國內(nèi)鏡像cnpm安裝webpack腳手架(npm安裝過慢，為了效率下面都使用國內(nèi)鏡像)。
插播: 
npm init  
npm init 用來初始化生成一個新的 package.json 文件。它會向用戶提問一系列問題，如果你覺得不用修改默認配置，一路回車就可以了。  
如果使用了 -f（代表force）、-y（代表yes），則跳過提問階段，直接生成一個新的 package.json 文件。
install 命令可以使用不同參數(shù)，指定所安裝的模塊屬于哪一種性質(zhì)的依賴關系，即出現(xiàn)在 packages.json 文件的哪一項中。  
–save：模塊名將被添加到 dependencies，可以簡化為參數(shù)-S. 
–save-dev：模塊名將被添加到 devDependencies，可以簡化為參數(shù)-D。

$ npm init -y
Wrote to D:webpackpackage.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

cnpm install webpack webpack-cli --save-dev

3.查看目錄結(jié)構(gòu) ls -l

ls -l

4.接下來按webpack中文文檔安裝篇教程演練。在當前文件夾創(chuàng)建目錄結(jié)構(gòu)src、src/index.js和index.html，文件內(nèi)容直接復制文檔中的，最后按照文檔修改package.json將包改為私有，移除入口，防止意外發(fā)布。

index.js:

function component() {
    var element = document.createElement("div");

    // Lodash（目前通過一個 script 腳本引入）對于執(zhí)行這一行是必需的
    //輸出=>Hello webpack，具體參考Lodash文檔
    element.innerHTML = _.join(["Hello", "webpack"], " ");

    return element;
}

document.body.appendChild(component());

index.html:

package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "privete": true,//將包改為私有，移除入口，防止意外發(fā)布。"main": "index.js"（入口文件）
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

5.示例問題說明。
webpack中文文檔對該實例的說明：
在此示例中，

cmd:

$ npx webpack
Hash: 01e246061d692c96839a
Version: webpack 4.36.1
Time: 2044ms
Built at: 2019-07-19 21:32:22
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 313 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
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/

chrome(index.html):

插播:

更新 index.html 文件。因為現(xiàn)在是通過 import 引入 lodash，所以將 lodash