webpack入门学习

1.概念

来自官网：本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

简单总结一下：

1）它是一个js前端打包工具；

2）我们普通的前端程序，是由html、js、css等文件，还有许多资源组成，而webpack，会把他们全部整合成一个包，这就是bundles；

2.实践

1）首先去创建可以正常运行的一个html和js文件，如下：

页面已成功执行

2）创建一个package.json文件用于配置一些依赖

根目录下执行npm init -y：

3) 在根目录下安装webpack

执行npm install webpack --save-dev

执行npm install webpac-cli webpack --save-dev

会生成一个node_modules文件夹我们使用的依赖全部在这里存放；

4）然后新建一个webpack.config.js的文件

这个文件用于配置，项目的一些入口文件、出口文件位置等信息，注意这里需要使用es5的形式去书写：

上图就是基本配置，我们使用path插件，这个是管理包路径的插件，我们是用它的api，我们看到有入口，出口，还有模式组成，__dirname是根目录的意思，也就是入口在根目录下的index.js上，而打包生成的就是dist文件夹；

下面修改一下package.json里面的命令：

 5）执行npm run build

刚开始报错是因为没有修改命令，打包生成的dist就是我们是指定的bundle.js

6）但是我们只看到了生成的js文件，我们要是上传服务器肯定要有页面的，接下来我们需要配置使打包生成一个html文件：

我们需要使用到一个插件HtmlWebpackPlugin，这个插件的作用就是生成html文件，配置如下：

配置红我们实例化一个HtmlWebpackPlugin这里我们给他传递了我们根目录下的index.html,并指定了生成html的名字；

我们再运行一下npm run build：

 可以看到这个html除了和我们根目录下的html一样之外，还引入了我们配置生成的js文件，这就是打包；

3.如何像框架项目一样命令运行

上述情况我们可以想象每次改变代码都需要打包以后生成新的文件，刷新并不能改变页面，

那么我们需要用webpack-dev-server来启动一个服务，将你指定的文件包内容运行起来，如下：

这里指定了端口和文件包的路径；

并且在package.json中配置运行命令：

那么我们来运行一下：npm run start

出现了这个问题，可能webpack-dev-server没有安装好，重新安装一下：

npm install webpack-dev-server --save-dev，下图所示安装成功：

 下面我们打开localhost：8088

项目已经可以正常运行了：