记录--从原理分析vue开发环境搭建的全部过程

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。

但是对项目里的webpack封装和配置了解的不清楚，容易导致出问题不知如何解决，或者不会通过webpack去扩展新功能。

该篇文章主要是想告诉兄弟们，如何一步一步的通过 webpack4来搭建自己的vue开发环境

首先我们要知道 vue-cli生成的项目，帮我们配置好了哪些功能？

ES6代码转换成ES5代码
scss/sass/less/stylus转css
.vue文件转换成js文件
使用 jpg、png，font等资源文件
自动添加css各浏览器产商的前缀
代码热更新
资源预加载
每次构建代码清除之前生成的代码
定义环境变量
区分开发环境打包跟生产环境打包
....

1. 搭建 `webpack` 基本环境

该篇文章并不会细讲 webpack 是什么东西，如果还不是很清楚的话，可以先去看看 webpack官网

简单的说，webpack是一个模块打包机，可以分析你的项目依赖的模块以及一些浏览器不能直接运行的语言jsx、vue等转换成 js、css文件等，供浏览器使用。

1.1 初始化项目

在命令行中执行 npm init 然后一路回车就行了，主要是生成一些项目基本信息。最后会生成一个 package.json 文件

npm init

1.2 安装`webpack`

1.3 写点小代码测试一下`webpack`是否安装成功了

新建一个src文件夹，然后再建一个main.js文件

// src/main.js

console.log('hello webpack')

然后在 package.json 下面加一个脚本命令

然后运行该命令

npm run serve

如果在 dist 目录下生成了一个main.js文件，则表示webpack工作正常

2. 开始配置功能

新建一个 build 文件夹，用来存放 webpack配置相关的文件
在build文件夹下新建一个webpack.config.js，配置webpack的基本配置
修改 webpack.config.js配置

修改package.json 文件，将之前添加的 serve 修改为

"serve": "webpack ./src/main.js --config ./build/webpack.config.js"

2.1 配置 `ES6/7/8` 转 `ES5`代码

安装相关依赖

npm install babel-loader @babel/core @babel/preset-env

修改webpack.config.js配置

在项目根目录添加一个 babel.config.js 文件

然后执行 npm run serve 命令，可以看到 ES6代码被转成了ES5代码了

2.1.1 `ES6/7/8 Api` 转`es5`

babel-loader只会将 ES6/7/8语法转换为ES5语法，但是对新api并不会转换。

我们可以通过 babel-polyfill 对一些不支持新语法的客户端提供新语法的实现

安装

npm install @babel/polyfill

修改webpack.config.js配置

在 entry 中添加 @babel-polyfill

2.1.2 按需引入`polyfill`

2.1.2 和 2.1.1 只需要配置一个就行

修改时间 2019-05-05、来自评论区兮漫天的提醒

安装相关依赖

npm install core-js@2 @babel/runtime-corejs2 -S

修改 babel-config.js

配置了按需引入 polyfill 后，用到es6以上的函数，babel会自动导入相关的polyfill，这样能大大减少打包编译后的体积

2.2 配置 `scss` 转 `css`

在没配置 css 相关的 loader 时，引入scss、css相关文件打包的话，会报错

安装相关依赖

npm install sass-loader dart-sass css-loader style-loader -D

sass-loader, dart-sass主要是将 scss/sass 语法转为css

css-loader主要是解析 css 文件

style-loader 主要是将 css 解析到 html页面的 style 上

修改webpack.config.js配置

2.3 配置 postcss 实现自动添加css3前缀

安装相关依赖

npm install postcss-loader autoprefixer -D

修改webpack.config.js配置

在项目根目录下新建一个 postcss.config.js

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

使用 html-webpack-plugin来创建html页面，并自动引入打包生成的js文件

安装依赖

npm install html-webpack-plugin -D

新建一个 public/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>Document</title>

</head>

<body>

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

</body>

</html>

修改 webpack-config.js 配置

2.4 配置 devServer 热更新功能

通过代码的热更新功能，我们可以实现不刷新页面的情况下，更新我们的页面

安装依赖

npm install webpack-dev-server -D

修改webpack.config.js配置

通过配置 devServer 和 HotModuleReplacementPlugin 插件来实现热更新

2.5 配置 webpack 打包图片、媒体、字体等文件

安装依赖

npm install file-loader url-loader -D

file-loader 解析文件url，并将文件复制到输出的目录中

url-loader 功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件复制到输出的目录中

修改 webpack-config.js 配置添加 rules 配置，分别对图片，媒体，字体文件进行配置

// build/webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const webpack = require('webpack')

module.exports = {

  // 省略其它配置 ...

  module: {

    rules: [

      // ...

      {

        test: /\.(jpe?g|png|gif)$/i,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 4096,

              fallback: {

                loader: 'file-loader',

                options: {

                    name: 'img/[name].[hash:8].[ext]'

                }

              }

            }

          }

        ]

      },

      {

        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 4096,

              fallback: {

                loader: 'file-loader',

                options: {

                  name: 'media/[name].[hash:8].[ext]'

                }

              }

            }

          }

        ]

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 4096,

              fallback: {

                loader: 'file-loader',

                options: {

                  name: 'fonts/[name].[hash:8].[ext]'

                }

              }

            }

          }

        ]

      },

    ]

  },

  plugins: [

    // ...

  ]

}

3. 让 `webpack` 识别 `.vue` 文件

安装需要的依赖文件

npm install vue-loader vue-template-compiler cache-loader thread-loader -D

npm install vue -S

vue-loader 用于解析.vue文件

vue-template-compiler 用于编译模板

cache-loader 用于缓存loader编译的结果

thread-loader 使用 worker 池来运行loader，每个 worker 都是一个 node.js 进程。

修改 webpack.config.js配置

// build/webpack.config.js

const path = require('path')

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

  // 指定打包模式

  mode: 'development',

  entry: {

    // ...

  },

  output: {

    // ...

  },

  devServer: {

    // ...

  },

  resolve: {

    alias: {

      vue$: 'vue/dist/vue.runtime.esm.js'

    },

  },

  module: {

    rules: [

      {

        test: /\.vue$/,

        use: [

          {

            loader: 'cache-loader'

          },

          {

            loader: 'thread-loader'

          },

          {

            loader: 'vue-loader',

            options: {

              compilerOptions: {

                preserveWhitespace: false

              },

            }

          }

        ]

      },

      {

        test: /\.jsx?$/,

        use: [

          {

            loader: 'cache-loader'

          },

          {

            loader: 'thread-loader'

          },

          {

            loader: 'babel-loader'

          }

        ]

      },

      // ...

    ]

  },

  plugins: [

    // ...

    new VueLoaderPlugin()

  ]

}

测试一下

在 src 新建一个 App.vue

// src/App.vue

<template>

  <div class="App">

    Hello World

  </div>

</template>

<script>

export default {

  name: 'App',

  data() {

    return {};

  }

};

</script>

<style lang="scss" scoped>

.App {

  color: skyblue;

}

</style>

修改 main.js

import Vue from 'vue'

import App from './App.vue'

new Vue({

  render: h => h(App)

}).$mount('#app')

运行一下

npm run serve

4. 定义环境变量

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

plugins: [

    new webpack.DefinePlugin({

      'process.env': {

        VUE_APP_BASE_URL: JSON.stringify('http://localhost:3000')

      }

    }),

]

5. 区分生产环境和开发环境

新建两个文件

webpack.dev.js 开发环境使用
webpack.prod.js 生产环境使用
webpack.config.js 公用配置
开发环境与生产环境的不同

5.1 开发环境

不需要压缩代码
需要热更新
css不需要提取到css文件
sourceMap
...

5.2 生产环境

压缩代码
不需要热更新
提取css，压缩css文件
sourceMap
构建前清除上一次构建的内容
...

安装所需依赖

npm i @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin -D

@intervolga/optimize-cssnano-plugin 用于压缩css代码
mini-css-extract-plugin 用于提取css到文件中
clean-webpack-plugin 用于删除上次构建的文件
webpack-merge 合并 webpack配置
copy-webpack-plugin 用户拷贝静态资源

5.3 开发环境配置

build/webpack.dev.js

// build/webpack.dev.js

const merge = require('webpack-merge')

const webpackConfig = require('./webpack.config')

const webpack = require('webpack')

module.exports = merge(webpackConfig, {

  mode: 'development',

  devtool: 'cheap-module-eval-source-map',

  module: {

    rules: [

      {

        test: /\.(scss|sass)$/,

        use: [

          {

            loader: 'style-loader'

          },

          {

            loader: 'css-loader',

            options: {

              importLoaders: 2

            }

          },

          {

            loader: 'sass-loader',

            options: {

              implementation: require('dart-sass')

            }

          },

          {

            loader: 'postcss-loader'

          }

        ]

      },

    ]

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: JSON.stringify('development')

      }

    }),

  ]

})

webpack.config.js

// build/webpack.config.js

const path = require('path')

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

  entry: {

    // 配置入口文件

    main: path.resolve(__dirname, '../src/main.js')

  },

  output: {

    // 配置打包文件输出的目录

    path: path.resolve(__dirname, '../dist'),

    // 生成的 js 文件名称

    filename: 'js/[name].[hash:8].js',

    // 生成的 chunk 名称

    chunkFilename: 'js/[name].[hash:8].js',

    // 资源引用的路径

    publicPath: '/'

  },

  devServer: {

    hot: true,

    port: 3000,

    contentBase: './dist'

  },

  resolve: {

    alias: {

      vue$: 'vue/dist/vue.runtime.esm.js'

    },

    extensions: [

      '.js',

      '.vue'

    ]

  },

  module: {

    rules: [

      {

        test: /\.vue$/,

        use: [

          {

            loader: 'cache-loader'

          },

          {

            loader: 'vue-loader',

            options: {

              compilerOptions: {

                preserveWhitespace: false

              },

            }

          }

        ]

      },

      {

        test: /\.jsx?$/,

        loader: 'babel-loader'

      },

      {

        test: /\.(jpe?g|png|gif)$/,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 4096,

              fallback: {

                loader: 'file-loader',

                options: {

                  name: 'img/[name].[hash:8].[ext]'

                }

              }

            }

          }

        ]

      },

      {

        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 4096,

              fallback: {

                loader: 'file-loader',

                options: {

                  name: 'media/[name].[hash:8].[ext]'

                }

              }

            }

          }

        ]

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,

        use: [

          {

            loader: 'url-loader',

            options: {

              limit: 4096,

              fallback: {

                loader: 'file-loader',

                options: {

                  name: 'fonts/[name].[hash:8].[ext]'

                }

              }

            }

          }

        ]

      },

    ]

  },

  plugins: [

    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({

      template: path.resolve(__dirname, '../public/index.html')

    }),

    new webpack.NamedModulesPlugin(),

    new webpack.HotModuleReplacementPlugin(),

  ]

}

5.4 生产环境配置

const path = require('path')

const merge = require('webpack-merge')

const webpack = require('webpack')

const webpackConfig = require('./webpack.config')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');

/*   clean-webpack-plugin 3.0 以上的版本需要使用对象结构  */

// const CleanWebpackPlugin = require('clean-webpack-plugin')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(webpackConfig, {

  mode: 'production',

  devtool: '#source-map',

  optimization: {

    splitChunks: {

      cacheGroups: {

        vendors: {

          name: 'chunk-vendors',

          test: /[\\\/]node_modules[\\\/]/,

          priority: -10,

          chunks: 'initial'

        },

        common: {

          name: 'chunk-common',

          minChunks: 2,

          priority: -20,

          chunks: 'initial',

          reuseExistingChunk: true

        }

      }

    }

  },

  module: {

    rules: [

      {

        test: /\.(scss|sass)$/,

        use: [

          {

            loader: MiniCssExtractPlugin.loader

          },

          {

            loader: 'css-loader',

            options: {

              importLoaders: 2

            }

          },

          {

            loader: 'sass-loader',

            options: {

              implementation: require('dart-sass')

            }

          },

          {

            loader: 'postcss-loader'

          }

        ]

      },

    ]

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: 'production'

      }

    }),

    new MiniCssExtractPlugin({

      filename: 'css/[name].[contenthash:8].css',

      chunkFilename: 'css/[name].[contenthash:8].css'

    }),

    new OptimizeCssnanoPlugin({

      sourceMap: true,

      cssnanoOptions: {

        preset: [

          'default',

          {

            mergeLonghand: false,

            cssDeclarationSorter: false

          }

        ]

      }

    }),

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../public'),

        to: path.resolve(__dirname, '../dist')

      }

    ]),

    new CleanWebpackPlugin()

  ]

})

5.5 修改package.json

"scripts": {

    "serve": "webpack-dev-server --config ./build/webpack.dev.js",

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

},

6 打包分析

有的时候，我们需要看一下webpack打包完成后，到底打包了什么东西，

这时候就需要用到这个模块分析工具了 webpack-bundle-analyzer

安装依赖

npm install --save-dev webpack-bundle-analyzer

修改webpack-prod.js配置，在 plugins属性中新增一个插件

在开发环境中，我们是没必要进行模块打包分析的，所以我们将插件配置在了生产环境的配置项中

运行打包命令

npm run build

执行成功后会自动打开这个页面

7. 集成 `VueRouter`,`Vuex`

首先是安装相关依赖

npm install vue-router vuex --save

7.1 集成 `Vue-Router`

新增视图组件在 src 目录下新增两个视图组件 src/views/Home.vue 和 src/views/About.vue

// src/views/Home.vue

<template>

  <div class="Home">

    <h2>Home</h2>

  </div>

</template>

<script>

export default {

  name: 'Home',

  data() {

    return {};

  }

};

</script>

<style lang="scss" scoped>

</style>

About.vue 内容跟 Home.vue 差不多，将里面的 Home 换成 About 就OK了

新增路由配置文件

在 src 目录下新增一个 router/index.js 文件

// src/router/index.js

import Vue from 'vue'

import VueRouter from "vue-router";

import Home from '../views/Home';

import About from '../views/About';

Vue.use(VueRouter)

export default new VueRouter({

  mode: 'hash',

  routes: [

    {

      path: '/Home',

      component: Home

    },

    {

      path: '/About',

      component: About

    },

    {

      path: '*',

      redirect: '/Home'

    }

  ]

})

修改 main.js 文件

// main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

修改 App.vue 组件

// App.vue

// 在 template 中添加

// src/App.vue

<template>

  <div class="App">

    Hello World

  </div>

  <div>

      // router-link 组件 用来导航到哪个路由

      <router-link to="/Home">go Home</router-link>

      <router-link to="/About">go About</router-link>

    </div>

    <div>

      // 用于展示匹配到的路由视图组件

      <router-view></router-view>

    </div>

</template>

<script>

export default {

  name: 'App',

  data() {

    return {};

  }

};

</script>

<style lang="scss" scoped>

.App {

  color: skyblue;

}

</style>

运行 npm run serve 命令，如没配置错误，是可以看到点击不同的路由，会切换到不同的路由视图

7.2 配置路由懒加载

在没配置路由懒加载的情况下，我们的路由组件在打包的时候，都会打包到同一个js文件去，当我们的视图组件越来越多的时候，就会导致这个 js 文件越来越大。然后就会导致请求这个文件的时间变长，最终影响用户体验

安装依赖

npm install @babel/plugin-syntax-dynamic-import --save-dev

修改babel.config.js

module.exports = {

  presets: [

    [

      "@babel/preset-env",

      {

        useBuiltIns: "usage"

      }

    ]

  ],

  plugins: [

     // 添加这个

    '@babel/plugin-syntax-dynamic-import'

  ]

}

修改 router/index.js 路由配置文件

import Vue from 'vue'

import VueRouter from "vue-router";

Vue.use(VueRouter)

export default new VueRouter({

  mode: 'hash',

  routes: [

    {

      path: '/Home',

      component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')

      // component: Home

    },

    {

      path: '/About',

      component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')

      // component: About

    },

    {

      path: '*',

      redirect: '/Home'

    }

  ]

})

运行命令 npm run build 查看是否生成了 Home...js 文件和 About...js 文件

7.3 集成 Vuex

在 src 目录下新建一个 store/index.js 文件

// store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

  counter: 0

}

const actions = {

  add: ({commit}) => {

    return commit('add')

  }

}

const mutations = {

  add: (state) => {

    state.counter++

  }

}

const getters = {

  getCounter (state) {

    return state.counter

  }

}

export default new Vuex.Store({

  state,

  actions,

  mutations,

  getters

})

修改 main.js 文件导入 vuex

// main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'  // ++

new Vue({

  router,

  store,    // ++

  render: h => h(App)

}).$mount('#app')

修改 App.vue ，查看 vuex 配置效果

// App.vue

<template>

  <div class="App">

    <div>

      <router-link to="/Home">go Home</router-link>

      <router-link to="/About">go About</router-link>

    </div>

    <div>

      <p>{{getCounter}}</p>

      <button @click="add">add</button>

    </div>

    <div>

      <router-view></router-view>

    </div>

  </div>

</template>

<script>

import { mapActions, mapGetters } from 'vuex'

export default {

  name: 'App',

  data() {

    return {};

  },

  computed: {

    ...mapGetters(['getCounter'])

  },

  methods: {

    ...mapActions(['add'])

  }

};

</script>

<style lang="scss" scoped>

.App {

  text-align: center;

  color: skyblue;

  font-size: 28px;

}

</style>

运行命令 npm run serve

当点击按钮的时候，可以看到我们的getCounter一直在增加

8 总结

到目前为止，我们已经成功的自己搭建了一个 vue 开发环境，不过还是有一些功能欠缺的，有兴趣的小伙伴可以交流交流。在搭建过程中，还是会踩很多坑的。

如果还不熟悉 webpack 的话，建议自己搭建一次。可以让自己能深入的理解 vue-cli 替我们做了什么

项目代码：github.com/lentoo/vue-…

本文转载于:

https://juejin.cn/post/6844903833160646663

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。