0.安装node（前置条件）
    node官网：https://nodejs.org/zh-cn/
    1.配置环境
    此电脑右键 —> 属性 —>
    image.png
    高级属性设置 —>
    image.png
    环境变量 —>
    image.png
    系统变量 —>找到Path —> 编辑 —> 新建
    image.png
    将你准备好的文件夹路径放入
    image.png
    然后一路确定，关掉系统面板，环境配置完成
    2.npm init -y
    win+R 打开控制台 —> 输入cmd
    image.png
    打开控制台后，输入cd/d 准备好的文件夹路径
    image.png
    然后输入npm init -y
    image.png
    然后会出现一大堆 东西，并且你准备好的文件夹路径下会有一个package.json文件
    image.png
    然后再在控制台输入npm install webpack webpack-cli —save—dev
    image.png
    像图片里这样，就说明webpack和webpack-cli的局部安装完成了
    image.png
    现在就可以在该环境的node_modules文件夹的目录编写文件了
    在该目录下创建
    index.js (import goo_console from ‘./goo_console.js’;console.log(‘Good’);goo_console();)，
    goo_console.js (export default function(){console.log(‘!’);})，
    index.html ()
    image.png
    现在cmd控制台输入npx webpack —entry=./index.js —output-filename=bundle.js —mode=development
    image.png
    现在点击index.html，然后就会在控制台看到Good！
    image.png
    接下来是，便捷打包操作
    使用npm script(npm 脚本)
    该内容多数来自http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html，想深入了解的可以前往查看
    这里说一下简单用法
    打开package.json文件
    在”script”{}中添加（课本中的”bundle”: 中没有npx，所以是会报错的）
    “bundle”: “npx webpack —entry=./index.js —output-filename=bundle.js —mode=development”
    image.png
    保存退出后，修改index.js或goo-console.js中的内容
    在控制台输入npm run bundle，再打开index.html
    image.png

    1.4.5 webpack-dev-server
    这里的内容是为了更方便使用的，主要效果是不用dist文件，以及不用老是打包，直接在8080里面刷新就能看!!!
    首先，还是打开cmd跳到你之前装webpack和webpack-cli的文件夹下
    image.png
    然后输入npm install webpack-dev-server —save-dev
    image.png
    安装完后，打开文件夹下的package.json,
    将里面的script的内容改成下图这个样子
    image.png
    在该文件夹下新建一个webpack.config.js文件（有的话就不用）
    内容是这样
    image.png
    这样就行了
    控制台输入 npm run dev
    image.png
    出现这样就说明成功了，在网页输入localhost:8080，就能看到你index.html里面的内容了
    而且就算你把dist文件夹删除也可以运行
    image.png
    可以看到控制台和页面都没有内容，这是因为我把东西都注释掉了
    控制台中还有一个错误提示，这是html5的奇怪报错，可以不理会，
    要解决的也行，解决方法来自https://www.cnblogs.com/hermitks/p/12596773.html
    在HTML的head标签里面加上就行了
    image.png
    现在没有了