初探webpack之从零搭建Vue开发环境 (2)

平时开发项目，预览效果时，一般直接访问某个ip 和端口进行调试的，webpack-dev-server就是用来帮我们实现这个功能，他实际上是基于express来实现web服务器的功能，另外webpack-dev-server打包之后的html和bundle.js是放在内存中的，目录里是看不到的，一般会配合webpack的热更新来使用。

$ yarn add -D webpack-dev-server

接下来要在webpack.config.js配置devServer环境，包括package.json的配置。

// webpack.config.js // ... module.exports = { // ... devServer: { hot: true, // 开启热更新 open: true, // 自动打开浏览器预览 compress: true, // 开启gzip port: 3000 //不指定端口会自动分配 }, // ... } // package.json // ... "scripts": { "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" }, // ...

随后运行npm run dev即可自动打开浏览器显示预览，当然按照上边的代码来看页面是空的，但是可以打开控制台发现确实加载了DOM结构，并且Console中显示了我们console的2，并且此时如果修改了源代码文件，比如在DOM中加入一定的结构，发现webpack是可以进行HMR的。

搭建Vue基础环境

首先我们可以尝试一下对于.js中编写的Vue组件进行构建，即不考虑单文件组件.vue文件的加载，只是构建一个Vue对象的实例，为了保持演示的代码尽量完整，此时我们在src下建立一个main.js出来作为之后编写代码的主入口，当然我们还需要在index.js中引入main.js，也就是说此时代码的名义上的入口是main.js并且代码也是在此处编写，实际对于webpack来说入口是index.js，截至此时的commit为625814a。
首先我们需要安装Vue，之后才能使用Vue进行开发。

$ yarn add vue

之后在/src/main.js中编写如下内容。

// /src/main.js import Vue from "vue"; new Vue({ el: "#app", template: "<div>Vue Example</div>" })

另外要注意这里需要在webpack.config.js中加入如下配置，当然这里只是为了处理Vue为compiler模式，而默认是runtime模式， 即引入指向dist/vue.runtime.common.js，之后我们处理单文件组件.vue文件之后，就不需要这个修改了，此时我们重新运行npm run dev，就可以看到效果了。

// webpack.config.js // ... module.exports = { // ... resolve: { alias: { "vue$": "vue/dist/vue.esm.js" } }, // ... }

之后我们正式开始处理.vue文件，首先新建一个App.vue文件在根目录，此时的目录结构如下所示。

webpack-simple-environment ├── dist │ ├── index.html │ └── index.js ├── public │ └── index.html ├── src │ ├── App.vue │ ├── index.js │ ├── main.js │ └── sum.js ├── jsconfig.js ├── LICENSE ├── package.json ├── README.md ├── webpack.config.js └── yarn.lock

之后我们修改一下main.js以及App.vue这两个文件。

import Vue from "vue"; import App from "./App.vue"; const app = new Vue({ ...App, }); app.$mount("#app"); <!-- App.vue --> <template> <div>{{ msg }}</div> </template> <script> export default { name: "App", data: () => ({ msg: "Example" }) } </script> <style scoped> .example{ font-size: 30px; } </style>

之后便是使用loader进行处理的环节了，因为我们此时需要对.vue文件进行处理，我们需要使用loader处理他们。

$ yarn add -D vue-loader vue-template-compiler css-loader vue-style-loader

之后需要在webpack.config.js中编写相关配置，之后我们运行npm run dev就能够成功运行了，此时的commit id为831d99d。

// webpack.config.js // ... const VueLoaderPlugin = require("vue-loader/lib/plugin") module.exports = { // ... module: { rules: [ { test: /\.vue$/, use: "vue-loader", }, { test: /\.css$/, use: [ "vue-style-loader", "css-loader" ], }, ], }, plugins:[ new VueLoaderPlugin(), // ... ] } 处理资源文件

通常我们需要处理资源文件，同样是需要使用loader进行处理，主要是对于图片进行处理，搭建资源文件处理完成后的commit id为f531cc1。

$ yarn add -D url-loader file-loader // webpack.config.js // ... module.exports = { // ... module: { rules: [ // ... { test: /\.(png|jpg|gif)$/i, use: [ { loader: "url-loader", options: { esModule: false, limit: 8192, //小于`8K`，用`url-loader`转成`base64` ，否则使用`file-loader`来处理文件 fallback: { loader: "file-loader", options: { esModule: false, name: "[name].[hash:8].[ext]", outputPath: "static", //打包之后文件存放的路径, dist/static } }, } } ] }, // ... ], }, // ... } <!-- App.vue --> <template> <div> <img src="http://www.likecs.com/static/vue.jpg" alt=""> <img src="http://www.likecs.com/static/vue-large.png" alt=""> <div>{{ msg }}</div> </div> </template> <script> export default { name: "App", data: () => ({ msg: "Example" }) } </script> <style scoped> .vue{ width: 100px; } .vue-large{ width: 300px; } .example{ font-size: 30px; } </style>