vue 官方为了让开发者快速进行开发，为了很大的精力，提供了vue-cli脚手架，只需简单几步，就能开始vue的开发了。

然而，对项目里的webpack封装和配置了解的不清楚，就容易导致出问题不知如何解决，甚至不会通过webpack去扩展新功能，对webpack+vue项目究竟是怎样搭建起来的感到一脸懵逼。

本文就是要解决这个问题。

初始化项目：

打开terminal，通过以下命令生成项目目录：

mkdir vue_webpack_demo

进入项目目录，并生成 package.json 文件（主要是项目的基本信息）：

mkdir vue_webpack_demo && npm init

安装webpack及脚手架

在安装好了node开发环境后，通过以下命令安装：

npm i -D webpack webpack-cli

此时webpack和webpack-cli会被安装到项目目录的node_modules目录下，同时webpack和webpack-cli会被添加到package.json 文件中的devDependencies(因为只是辅助开发，所以在此)对象中。

因为写当前博客的时间是2019年12月，所以安装的webpack是webpack4的最新稳定版本，很多配置都有默认的了。

配置ES6+转码为ES5:

babel-loader可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题。

例如IE9根本看不懂代码写的let和const是什么东西？只能选择报错，这就是浏览器对ES6的兼容性问题；我们可以通过 babel-polyfill 对一些不支持新语法、兼容性差的客户端提供新语法的实现。

npm i -D babel-loader @babel/core @babel/preset-env

然后，在项目根目录下新建一个src文件夹，然后再建一个 index.js 文件，

mkdir src && cd src && vi index.js

在 index.js中，写上2句代码：

const str = 'word';
console.log('hello ', str);

因为写当前博客的时间是2019年12月，所以安装的webpack是webpack4的最新稳定版本，很多配置都有默认的了。所以在项目根目录下执行以下命令：

webpack

就会把src的默认入口文件 index.js 打包到dist目录下。

创建webpack.config.js文件

在项目根目录下增加webpack.config.js文件：

vi webpack.config.js

然后写入以下配置：

module.exports = {
  mode: 'development', // 打包模式
  entry : './src/index.js', // 入口文件
  output : {
      filename : 'index.js', // 输出文件名
      path :  __dirname+'/dist' // 输出文件的根路径
  },
  module : {
      rules: [
          {
              /*将js文件转码成es5*/
              test: /\.js?$/,
              use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
          },
      ]
  },
}

然后在package.json的scripts先添加下面这个指令：

"build": "webpack --config ./webpack.config.js",

最后在terminal中运行:

npm run build

可以看到根目录会生成一个 dist 文件夹，包含一个由 src/index.js 打包出来的index.js。

使用 html-webpack-plugin来创建html页面

安装html-webpack-plugin插件

npm i -D html-webpack-plugin

添加入口文件在根目录下创建 index.html 文件：

vi  index.html

添加下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>做有追求的码农</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

修改webpack.config.js配置

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 指定开发者打包模式
  entry : './src/idex.js', //入口文件
  output : {
      filename : 'index.js',
      path :  __dirname+'/dist'
  },
  module : {
      rules: [
          {
            /*将js文件转码成es5*/
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
      ]
  },
  plugins:[
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包后的文件名，默认index.html
      template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
    })
  ]
}

查看效果运行npm run build ，我们可以看到 dist 文件夹下有一个index.html生成了，而且还引入了src/index.js的压缩包index.js。

安装配置并使用vue

安装vue及其插件：

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

其中，vue-loader 用于解析.vue文件，vue-template-compiler 用于编译模板。

修改webpack.config.js配置

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development', // 指定开发者打包模式
  entry : './src/idex.js', //入口文件
  output : {
      filename : 'index.js',
      path :  __dirname+'/dist'
  },
  module : {
      rules: [
          {
            /*将js文件转码成es5*/
            test: /\.js?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },            
          {
            test: /\.vue$/,
            use: [
              {
                loader: 'vue-loader',
                options: {
                  compilerOptions: {
                    preserveWhitespace: false
                  },
                }
              }
            ]
          },
      ]
  },
  plugins:[
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包后的文件名，默认index.html
      template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
    }),
     new VueLoaderPlugin()
  ]
}

使用vue 在 src 新建一个 App.vue：

cd src && vi App.vue

在App.vue 中添加以下代码：

<template>
  <div class="App">
    要做 {{msg}} 的码农
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
        msg: "有追求的",
    };
  }
};
</script>

修改src/index.js的代码为：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app');

打包及运行vue 再次运行：

npm run build

然后在浏览器打开 dist/index.html，可以发现vue已经可以运行了。

安装本地服务及代码热更新

安装webpack-dev-server

npm i -D webpack-dev-server

修改webpack.config.js配置

// ...
    devServer: { 
        host: 'localhost',
        port: 9527
    },
// ...

在package.json的scripts中增加一行启动本地服务指令：

"start": "webpack-dev-server",

默认会读取根目录下的webpack.config.js配置文件。

运行以及查看效果

npm start

用浏览器打开 http://localhost:9527/, 就可以本地开发了哦！而且当我们修改 src/App.vue 的代码后，浏览器是会自动刷新的(热更新)。

目前为止，一个简单的vue项目我们已经搭建出来了，之后我们可以像堆积木一样添加自己想要的功能了。

需要注意的是，devServer生成的文件是存在我们电脑的内存中的，不在我们的硬盘上。

加一些常用的loader

对于webpack来说，默认只能打包处理JS文件，或者说JS模块，但是webpack作为模块打包工具，需要打包的模块肯定不仅仅只有JS模块，还有：图片模块，CSS模块等等。

loader就是帮助webpack打包那些webpack默认打包不了的模块的工具；配置第三方loader，需要在webpack的配置文件中新增一个module节点，节点中是一个一个的规则集合，集合名字是rules，需要添加loader就在rules的集合中新增一个规则；每个规则必须的两个配置：

test ：test搭配的是键值对，值是一个正则表达式，用来匹配要处理的文件类型；
use ：用来指定使用哪个loader模块来打包处理该文件；

安装一些常用的loader

npm i -D  css-loader style-loader url-loader postcss-loader autoprefixer

其中：css-loader主要是解析 css 文件，style-loader 主要是将 css 解析到html页面的style上，postcss-loader和autoprefixer实现自动添加css3前缀。

特别是: file-loader可以用来帮助webpack打包处理一系列的图片文件，而url-loader它除了做file-loader能做的事情，还会通过配置规则将一定范围大小的图片打包成base64的字符串，放到dist.js文件里，从而减少https的图片请求数。

在webpack.config.js中增加配置

// ...
{
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: [
                    require("autoprefixer") /*自动添加前缀*/
                ]
            }
        }
    ]
},
{
    test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
    use: [{
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }]
}

自定义环境变量和常量

通过 webpack提供的DefinePlugin插件，可以很方便的定义环境变量

在根目录下添加config.js

const NODE_ENV = process.env.NODE_ENV; // webpack编译时会获取node环境的配置信息
const config = {
     production: { // 生产环境(线上环境)
        DOMAIN: 'production.com', // 上线域名
     },
     development: { // 开发环境
        DOMAIN: 'development.com', // 测试域名
     }
}
module.exports = config[NODE_ENV];

修改webpack.config.js文件

// ...
const constant = require('./config'); 
// ...
plugins:[
        // ...
        new webpack.DefinePlugin({ 
          CONSTANT: JSON.stringify(constant)
        })
        // ...
    ],
// ...

修改package.json

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },

NODE_ENV=development和NODE_ENV=production指定node环境

运行及调试由于修改了webpack.config.js所以需要重新运行npm start, 然后在src/idex.js后面加上一句测试代码：console.log(CONSTANT);

可以看到，配置成功打印出来了。

总结：

vue-cli是一个封装得很完美的vue脚手架，所以它的适应性很强；但是有些大公司他们的前端项目一般不会直接套用这种脚手架，而是需要结合公司内部的组件一步步搭起一个vue前端项目。

单纯的vue架构是非常简单的，但是结合到node环境和webpack一起用的话，有一些不是太熟悉node、webpack的前端同学就会有些蒙圈。

本文我们主要是搭建了一个基于webpack的vue开发环境，然后将需要的东西一件一件组装起来，虽然不算太完善，但是学会了这种思路的话，我们处理其他前端项目也不难了。