[vue]初识webpack

我们常用的webpack估计只是在vue的脚手架中进行一些简单的webpack更改，看到大段的webpack内容感到头大，但是当下越来越多的公司在岗位要求上都加上了一条能够熟悉webpack的配置，在找工作的这段时间里我决定啃一啃webpack这块老骨头。

图片：clipboard.png

我们在上边图片中能看到简单的webpack分为上述五大块。那么我们就来详细讲一下每一个是用做什么的


一、entry
entry是用作webpack的入口文件，因为webpack是一个模块打包器，所以会把一切资源都当成是一个一个的模块（js、html、css图片等），会根据入口文件寻找其依赖关系，形成一颗依赖树，在遍历完成这个依赖树之后才会生成打包之后的一些资源；

entry分为两种，单入口文件和多入口文件，单入口文件的写法是：

module.exports = {
  entry:'./src/index.js'
}

多入口文件的写法是：

module.exports = {
  entry:{
    index:'./src/index.js',
    search:'./src/search.js'
   }
}

二、output

output用来告诉webpack如何将编译后的文件输出到磁盘；
output也分为单入口和多入口写法：
单入口：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry:'./src/index.js', //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'index.js'
  },
};

多入口：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry:{
    indexx:'./src/index.js',
    seee:'./src/search.js'
  }, //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name].js'
  },
};

不同之处在于多入口文件中filename是使用了一个[name]的占位符，这个占位符是和entry对象的键名对应；


三、loaders

webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders可以去支持其他文件类型并把他们转成有效的模块，并且添加到依赖图中；loaders本身是一个函数，接受源文件作为参数，并且返回转换的结果；loaders的写法是：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry:{
    indexx:'./src/index.js',
    seee:'./src/search.js'
  }, //入口文件
  output:{
    path:path.join(__dirname,'dist'),
    filename:'[name].js'
  },
  mode:'production',
  module:{
    rules:[
      {
        test:/.js$/,
        use:'babel-loader'
      },
      {
        test:/.vue$/,
        use:'vue-loader'
      }      
    ]
  },
};

module对象中包含一个rules的数组，数组中分为test代表编译的后缀，use是使用的loader名称

四、plugins
插件用于打包输出文件的优化，资源管理和环境变量注入，plugins作用于整个构建过程；可以理解为任何loaders没办法完成的任务可以让plugins去完成；

图片：plugins.png

五、mode
Mode是用来指定当前打包的环境，里边有三个值：production（生产阶段）、development（开发阶段）、none。
接下来我们写一个能够解析vue文件的webpack配置：


首先我们安装webpack
第一步：我们需要先安装node，这里我就不多做演示；第二步：我们通过

npm init  -y

进行安装，这里的-y是我们默认全部选择yes进行安装，安装完之后会发现目录中会出现一个package.json文件
第三步：我们安装webpack及webpack的脚手架

npm install webpack  webpack-cli --save-dev

第四步：我们使用

./node_modules/.bin/webpack -v

来查看我们的webpack安装版本


然后我们进行webpack的配置

第一步：创建webpack.config.js文件
第二步：安装vue、vue-loader vue-template-comiler，使用命令

npm i vue vue-loader vue-template-compiler -D

进行安装
第三步：创建src文件夹，在其中创建vue文件，这里我们创建一个app.vue文件

<template>
  <div class="app">
    pw_msg
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:'我是一个保安'
    }
  }
}
</script>

第四步，在src文件夹下边创建index.js文件

import vue from 'vue';
import App from './app.vue';
const root  = document.createElement('div');
document.body.appendChild(root);
new vue({
  render:(h)=>h(App)
}).$mount(root)

第五步：在我们的webpack.config.js中进行配置

module.exports = {
  entry:'./src/index.js',
  output:{
    path:path.join(__dirname,'dist'),
    filename:'main.js'
  },
  module:{
    rules:[
      {
        test:/.vue$/,
        use:'vue-loader'
      }
    ]
  },
  plugins:[
    new VueLoaderPlugin()
  ]
}

第六步：我们可以使用如下命令进行打包

./node_modules/.bin/webpack

但是我们看到这条代码又长还不好记，那么我们应该咋办呢？
我们可以在package.json中做如下改动

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

我们在script下新增一条build，如上代码
然后我们使用如下代码进行打包，是不是看着就很舒服了呢？

npm run build

打包完成之后，如何检测我们打包的是否正确呢？我们可以在dist文件夹下边创建一个html文件，将dist文件夹下的main.js通过script标签引入进去，在浏览器中即可看到效果。


这篇文章写完了，你学会了吗？

楼主写的很详细哦，666

附上github地址：https://github.com/exwangwei/webpack-vue-demo