概念：Webpack是一个模块化打包工具，专注于构建模块化项目，在Webpack眼里一切文件都是模块，通过Loader转换翻译文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。
之所以一切文件皆模块，如：JavaScript、CSS、SCSS以及图片等资源，在Webpack眼中都是模块，因为这样可以更好的理清描述各个模块之间的依赖关系，方便Webpack对模块进行打包组合，输出浏览器使用的静态资源。
首先我们在创建一个文件夹，使用编辑工具（建议使用V S code 下载地址：https://code.visualstudio.com/）
之后我们打开VScode，在工作区域打开我们创建的文件夹，
image.png
Ctrl + `打开终端
image.png
输入执行npm init命令，会初始化得到一个简单的package.json文件，执行该命令后终端会依次询问 name, version, description，这些不用管它，直接默认。如下图：
image.png
有了上述文件之后我们就可以来安装我们需要的包，我们需要的是webpack和vue，那我们就执行npm i webpack vue vue-loader就可以了。安装好的如下图：
image.png
在这里面它有一些npm的提醒，警告，来看一下什么意思，它是说vue-loader（它会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块）它需要css-loader，我们需要根据它的提醒来安装就可以。如下图：
这样我们的项目就初始化好了。
我们可以在里面新建一个文件夹作为我们源码放置的目录，我们继续在里面建个app.vue，在app.vue写入
image.png
这样就是我们就得到一个最简单的vue组件，但是现在这个组件显然是无法在浏览器上运行的，这时候怎么做呢！我们继续，
image.png
这里我们创建一个webpack.config.js文件，它是打包前端资源的，会把前端不同类型的一些json，css，图片，字体这些，作为前端资源需要通过http请求去加载的内容。在我们开发web-app的时候都是一整个js加载到浏览器端之后去渲染出来的，所以说我们很多时候都可以通过简单的js文件作为我们的入口文件。
在这里我们声明的是一个绝对路径，它可以保证加载文件不出现错误，这个提示是编辑工具在鼠标移上去的时候给我们一个提示。
image.png
path是我们node.js的一个基本包，是用来处理路径的。
我们这里要使用一个js文件如下图：
image.png
app.vue这个组件不能直接挂载到HTML里面的，我们在index.js里面引用一下，首先把vue这个类库引入进来，然后new一下vue对象，在这个对象里声明一个render方法它接收一个h参数，通过它把咱们的.vue挂载到html里面，这一步只是声明了咱们挂载的内容，真正挂载还需要调用$mount到我们HTML节点里面，这个节点就需要我们在这里继续创建，然后把它插入到节点里面
image.png
这样我们的入口文件就好了，然后我们把叫做index.js的入口文件的路径输入到webpack.config.js文件里，这里的变量__dirname是node.js支持的一个人变量，代表这个文件所在的绝对路径，它和后面的路径拼接起来是一个绝对路径，保证我们能绝对访问到。有了入口后，我们还要把文件输出如下图：
image.png
有了我们的index.js这个文件，我们的webpack才能把我们的vue和这些.vue打包成一个完整的bundle.js，并且打包出来的是我们能够在浏览器里面直接运行的js代码。之后我们需要在package.json文件里加入"build": "webpack --config webpack.config.js"这个命令，如下：
image.png
写完之后我们就可以直接在终端里运行一下
image.png
提示必须要安装一个cli，按照它的提示来
image.png
我们这里有个错误，You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file .See告诉我们需要为.vue这种文件类型声明一个loader。
webpack的原生它是只支持js这种文件类型的，支持的语法是es5的，所以我们在使用超出它语法的时候，我们要使用帮它处理这些语法的工具
image.png
之后我们运行还是有问题
image.png
他说不支持css我们给它添加上
image.png
来帮我们处理css文件，最终输出的没有在报错：
image.png
在webpack里面每支持一种格式都要在这里配置的：
image.png
别忘了下载这些依赖，因为url-loader 依赖于file-loader所以别忘了。我们给项目添加上
image.png
image.png
之后打包
image.png
我们会发现它把我们的图片打包上去了，在bundle.js中搜索base64你会发现它正好跟我们引用的图片个数一样。说明它有用到
下面我们安一下npm i webpack-dev-server之后在package.json中添加字段：
image.png
因为我们这个配置文件是要同时应用在开发环境和正式环境上的，所以这个配置是要根据不同的环境做一些判断的，我们通过再跑npm scripts的时候设置环境变量来标识我们是开发环境还是正式环境，需要安装另一个包npm i cross-env
image.png
之后就可以添加判断了
image.png
image.png
到这里我们编译的只有js和图片没有一个html去容纳我们的js文件，那我们的这个项目是跑不起来的，它缺少一个HTML文件作为它的入口，这里有个很好用的组件：npm i html-webpack-plugin最终配置文件为
image.png
image.png
这时候运行代码npm run dev，提示我们已经可以在http://localhost: 8080上运行了
image.png
页面显示为
image.png
网友评论