一、什么是webpack?
webpack是一个模块化打包工具，利用递归算法，将后端代码前端化。那么什么是模块化呢？在现代化技术栈里面有四个概念：模块化、工程化、组件化、全栈化。想要直到答案，请戳如下链接https://www.jianshu.com/p/ee88e9849a1b（引用他人）。
二、首先要安装node!
webpack在使用的时候，要用到npm，那什么是npm(引用他人：http://www.dnodejs.com/what_is_npm.html)，npm就是node的包管理工具，所以我们要先安装node。去官网下载node安装包，然后一步步安装完成即可。如何检测安装node成功了呢？我们可以进行如下操作，如果安装成功，则会显示node的版本。
三、npm的使用！
- npm init：运行构建新项目的向导（其对应的就是package.json）
- npm install module_name：在项目中安装一个模块
- npm install -g module_name：全局方式安装一个模块
- npm install module_name -save：在项目中安装一个模块，并把此模块添加到项目配置文件package.json中，作为项目开发依赖（devDependency)
- npm list：列出项目中已安装的所有模块
- npm list -g：列出系统中已安装的所有模块
- npm remove module_name：从项目中移除已安装的模块
- npm remove -g module_name：从系统的全局安装中移除已安装的模块
- npm remove module_name -save：从项目中移除已安装的模块，并从配置依赖中移除依赖关系
- npm remove module_name -save-dev：从项目中移除已安装的模块，并从配置依赖中移除开发依赖（devDependency)关系
- npm update module_name：更新指定的已安装模块的版本
- npm update -g module_name：更新指定的全局那幢模块的版本
- npm -v：显示npm包管理器的当前版本
- npm adduser username：在npmjs.org创建一个账户
- npm whoami：显示你在npmjs.org上的账户详细资料
- npm publish：发布自己开发的模块到npmjs.org，要发布模块必须先有账户
四、npm命令在哪里配置？
（1)首先我们建立一个文件夹app-test
（2)我们利用命令行，进入这个文件夹，输入命令，npm init，我们会发现app-test文件夹下面会有一个package.json文件。如下是输入命令的界面显示：
(3)打开package.json文件，我们的npm命令的配置再scripts里面进行，如何让配置，我们后面会有所讲解，其内容如下：
五、webpack在项目中如何启动？
(1)我们首先要安装webpack，安装webpack的方法有全局安装和局部安装，在这里我们采用局部安装，因为局部安装更有利于项目的迁移，我们在命令行输入npm install webpack --save-dev，这是我们会发现app-test文件夹下面多了一个文件node-modules，然后package.json里面多了一项devDependencies。此时package.json内容如下：
(2)然后我们在scripts里面输入如下内容：
然后用命令行输入npm run build会出现如下错误：
为什么会出现如下错误呢？因为webpack4已经把命令行CLI分离出去了，安装webpack的时候不会自动安装，而webpack3里面集成了CLI，解决该错误，我们就在命令行输入：npm install webpack-cli --save-dev。该命令是用来安装webpack-cli的。
(3)webpack-cli安装成功以后再运行命令npm run build又会出现如下的错误:
出现此错误的原因是因为我们在进行命令配置的时候，没有指定要打包文件的路径（即入口），也没有指定被打包好的文件的存放路径（即出口），所以我们需要指定出口和入口。我们建立一个test.js文件作为测试文件，我们在里面写入console.log("nihao");
(4）为了解决上述的问题，我们来了解一下webpack配置文件webpack.config.js文件，为什么使用该文件呢？大多数文件需要很复杂的设置，webpack支持该配置文件，这比在终端输入大量的命令要高效的多，所以我们创建一个取代以上使用CLI选项方式的配置文件。下面我们来创建一个webpack.config.js配置文件。
(1)webpack.config.js作为一个主配置文件，就需要暴露在全局下面。
(2)然后去命令行运行npm run build，又出现了如下错误：
根据错误提示信息，就是出口文件的路径必须是绝对路径。
(3)那么如何保证绝对路径呢？我们可以利用node里面的path。
(4)下来我们运行npm run build命令就不会出现错误，并且在app-test文件夹下面多了一个build文件夹，build文件夹下面是打包以后的bundle.js文件，成功以后的界面展示如下：
(5被打包的文件test.js里面的内容是console.log(“nihao"); 打包好的文件bundle.js的文件内容如下所示：
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("nihao")}]);(6)在app-test文件夹下面建立一个index.html文件，将bundle.js引入，然后用浏览器打开，在控制台就会看见输出结果。
微总结：这是我们在从来未接触过webpack的情况下，进行最简单的打包，本次熟悉了webpack的简单命令，还认识了package.json文件，webpack.config.js文件。