不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （插件、配置详解）（二）webpack的配置说明

三、配置webpack

当我们安装好 vue-loader 和 vue-template-compiler 后，我们就可以去配置webpack 让他可以解析.vue单文件了。

这里多嘴一句，为什么必须要安装 vue-template-compiler 这个插件？

实际上vue-loader并不会去解析template模板，他只是帮助webpack去处理.vue文件，当进入到.vue文件后，处理template模板的时候，就用到了 vue-template-compiler 插件,他会去把 template 模板字符串转化为 render函数，以便构建vNode。

（1）配置 webpack的 entry

打开webpack.config.js文件，写入以下代码：

let path = require('path')
module.exports = {
  entry: path.resolve(__dirname, 'main.js')
}

entry是用来配置webpack的入口文件，当我们在命令行输入webpack的打包命令的时候，webpack会去读取根目录的webpack.config.js文件，然后根据entry配置的地址找到入口文件。这里我们设置 main.js 为入口文件。

（2）配置webpack的 output

在 module.exports 中增加如下代码：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js", // string    // 输出文件的名称
    publicPath: "", // string    // 相对于HTML页面解析的输出目录的url
}

path属性是指压缩完毕，压缩的文件要放到哪个文件夹下面

filename属性是指，压缩后的js文件名叫什么

publicePath这个属性是个大坑！！！它在不同的环境下有不同的意思！有时间我会单独写个博客说明这个属性！现在这个属性可以不配置，或者配置为空即可。

（3）配置webpack的 module 

在 module.exports 中增加如下代码并在终端输入命令 npm i  --save-dev css-loader style-loader 

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }, {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }

通过语义我们应该也可以看出，rules是规则，在里面有一个个对象，test的属性值是正则，即，如果碰到.vue结尾的文件，那么使用vue-loader去处理他。如果碰到.css结尾的文件，那么 先使用css-loader去解析他，然后再使用style-loader去处理他，注意这个顺序是从右到左执行的。 css-loader很容易理解是处理css文件了，那style-loader是做什么的？ style-loader接收从css-loader传过来的css样式，然后把它们解析成字符串放到js文件里面，在浏览器解析js文件的时候，通过js动态的向head标签里面增加style标签添加样式。如果不想把css放到js文件里面，可以使用插件 extract-text-webpack-plugin 把css文件单独提取出来。

（4）配置webpack的 plugin

// 在头部引入 VueLoaderPlugin
let VueLoaderPlugin = require('vue-loader/lib/plugin')


plugins: [
    // 为了vue-loader安装的插件
    new VueLoaderPlugin()
  ]

（5）打开App.vue，按照格式输入以下代码：

<template>
  <div>
    <h1>
      hello vue
    </h1>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>
</style>

然后再终端输入： webpack  回车！

这时候会发现在根目录下出现了一个 dist 文件夹 这是我们在output里面配置的，把输出文件放到dist下。接着我们进入index.html文件，在body标签里面加入：

<div id="app"></div>
<script src="./dist/bundle.js"></script>

然后打开index.html文件，发现界面上已经显示 hello vue。这说明，我们之前所有的配置都是正确的！

至此，我们完成了webpack的一些基本配置。但是每次调试都要打包实在太麻烦，如果想实现热更新要怎么做，而且现在是直接打开index.html，使用的是file协议，如果想发送ajax就不行了，怎么办？

答案就是： 使用webpack让他来帮我们开启一个服务器，并监听文件和页面，当文件有保存的行为时，立刻刷新页面。

下一章： 不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （配置详解）（三）webpack配置devServer，详细说明原理。