1. 初识webpack

在开始给项目加入构建前，你需要先新建一个 Web 项目:

    1、新建一个目录，再进入项目根目录后，执行 npm init 初始化最简单的采用了模块化开发的项目。

测试数据

2、安装 webpack

执行以下命令:

    npm i -D webpack@4

    npm i -D webpack@4 webpack-cli

    或者

    npm i -D webpack@4 webpack-cli

会在 package.json 加入安装的依赖项，如下图：

安装的依赖项

3、项目的目录结构

    在根目录下新建文件

        ① index,html （挂载页面）

index.html

        ② show.js

        ③ main.js (入口文件)

main.js

        ④ 创建 webpack.config.js 

webpack.config.js

4、执行打包命令

    ① 直接在控制台 输入：webpack =》 回车 =》坐等打包。。。

    ② 通过短命令来进行打包： 

    "scripts": {

            "build": "webpack --config webpack.config.js"

       },

        然后执行命令： npm run build =》 回车 =》 坐等打包

 5、最后通过 open with Live server 来打开 index.html,呈现出来的效果，如下图：

页面效果

webpack只能打包js和json文件!!!

就这样子，欢迎指正~