webpack学习实践第一天

摘要：学习实践第一天安装参考文档中文文档安装篇中文文档创建文件夹并且进入创建的文件夹初始化一个新的文件，使用跳过询问阶段。查看目录结构接下来按中文文档安装篇教程演练。中文文档对该实例的说明在此示例中，标签之间存在隐式依赖关系。

By Ylise

参考文档：

1.webpack中文文档安装篇

2.Lodash中文文档

1.创建文件夹 mkdir webpack-demo 并且进入创建的文件夹

mkdir webpack-demo && cd webpack-demo

2.初始化一个新的package.json文件，使用npm init -y跳过询问阶段。接下来使用国内镜像cnpm安装webpack脚手架(npm安装过慢，为了效率下面都使用国内镜像)。
插播: 
npm init  
npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。  
如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。
install 命令可以使用不同参数，指定所安装的模块属于哪一种性质的依赖关系，即出现在 packages.json 文件的哪一项中。  
–save：模块名将被添加到 dependencies，可以简化为参数-S. 
–save-dev：模块名将被添加到 devDependencies，可以简化为参数-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.查看目录结构 ls -l

ls -l

4.接下来按webpack中文文档安装篇教程演练。在当前文件夹创建目录结构src、src/index.js和index.html，文件内容直接复制文档中的，最后按照文档修改package.json将包改为私有，移除入口，防止意外发布。

index.js:

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

    // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
    //输出=>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,//将包改为私有，移除入口，防止意外发布。"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 文件。因为现在是通过 import 引入 lodash，所以将 lodash