从零开始基于webpack4 babel8搭建vue开发环境（三）

上一节我们已经搭建出了五脏俱全的开发环境，地址
这一节我们将继续完善一些常用功能的配置

首先是路由的懒加载，当我们的组件过多时，如果把所有的组件一起打包到同一个文件里，然后一起在第一次加载时就全部请求到的话，可能会导致性能问题，导致首屏加载过慢，这时，路由懒加载就显得非常有必要了，只有在我们真正导航到对应路由才会发起请求这样就会对性能产生极大的提升。
常用的路由懒加载是通过import的方式，配合babel进行转译，最后在请求到对应路由时插入新的script标签，从而拿到对应的组件内容

                {   
                    name:'routercomp',
                    path:'/',
                    component:() => import("../components/routercomp.vue")
                }

路由定义的地方，我们以异步的形式引入组件，但是这个import方法需要babel插件的支持，所以先安装插件

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

在.babelrc中进行配置

{
    "presets": [["@babel/preset-env",{"useBuiltIns": "usage"}]],
    "plugins": ["@babel/transform-runtime","@babel/plugin-syntax-dynamic-import"]
}

在webpack入口文件output中进行配置异步加载的文件名，默认是以依赖的名称name命名，我们还可以固定命名或者以hash开头等，

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename:"[hash].js"
  },

我们以hash值命名，
配置完成后npm run dev，可以看到head中额外引入了一个js文件，这个便是异步加载到的，

image.png

接下来我们配置css预处理工具，以less-loader为例
首先安装less-loader，less包

npm install less@^3.0.0 less-loader@^4.0.0 --save-dev

在webpack配置中加入less-loader

      {
        test:/\.less$/,
        use:["vue-style-loader","css-loader","less-loader"]
      }

在我们的routercomp中的style标签加上less配置，

<template>
    <div>
        <h1>routercom</h1>
        <h2>store:{{this.$store.state.text}}</h2>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less">
h2{
    color: red;
}
</style>

通过lang属性指定使用的处理器类型，npm run dev可以看到h2已经变成红色，less配置已生效

接下来，我们加入对图片和其他文件类型处理的工具 url-loader，他可以让我们使用相对路径而不用担心文件找不到的问题

安装url-loader

npm install url-loader@^1.0.0 --save-dev

url-loader的配置

{
        test: /\.(png|jpg|gif)$/,
        use:[
            {
                loader:"url-loader",
                options:{
                  name:'[path][name].[ext]',
                  limit: 8192
                }
            }
          ]
  }

这里我们简单的匹配了几种图片类型，大家可以根据项目具体需求去增加匹配类型，
通过options的配置，我们可以指定处理后的文件的路径和名字及转化base-64的大小限制策略等
这里指定了文件的路径为相对路径，名字为文件的名字，

然后我们新建一个static文件夹，再创建一个img文件夹，放入一张测试图片，我们在routercomp.vue文件中引入一个图片作为测试

<template>
    <div>
        <h1>routercom</h1>
        <h2>store:{{this.$store.state.text}}</h2>
        <img src="../static/img/test.png"/>
    </div>
</template>

最后在页面中展示的路径为

image.png

可以看到，小于8192字节的图片都被转化为了base-64地址

接下来我们加入对运行环境的定义，我们可以将一些全局变量注入到webpack构建过程中，我们的js代码可以根据这些变量进行一些判断，常用的是判断开发环境还是生产环境，根据不同的环境配置不同的接口地址，这里有一篇关于环境区别的文章讲的比较详细，
现在我们尝试将变量注入到编译过程，
我们通过webpack内置的DefinePlugin插件来为构建环境注入变量，

首先我们引入webpack，

const webpack = require("webpack")

使用webpack内置插件，首先要引入webpack

接下来定义注入变量env

new webpack.DefinePlugin({
      'env': JSON.stringify("environment"),
    }),

接下来我们尝试在index.js入口文件打印这个全局变量

console.log(env)

npm run dev重新运行，可以看到，控制台打印出environment

最后补充一下关于热更新和模块热替换

有很多博文提到要安装HotModuleReplacementPlugin这个插件，其实完全不用，在我们的webpack-dev-server的配置中，添加inline配置，就会触发热更新，添加hot配置，就会触发模块热更新，文档对于hot参数的描述。

Note that webpack.HotModuleReplacementPlugin is required to fully enable HMR. If webpack or webpack-dev-server are launched with the --hot option, this plugin will be added automatically, so you may not need to add this to your webpack.config.js. See the HMR concepts page for more information.

当我们添加hot参数后，会自动安装HotModuleReplacementPlugin这个插件，所以，只需要为webpack-dev-server添加--hot --inline,即可完成模块热更新配置，省去了很多配置的烦恼。
本文中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --open --port 8080 --host 0.0.0.0 --hot --config entry.js"
  },

即可完成模块热更新，当我们修改routercomp.vue中文本内容时，可以看到，页面上文本直接改变而没有重新刷新整个页面。

总结

到现在为止，一个完整的舒服的开发环境已经搭建完成，并配置了一些高级特性，下一节我们将配置生产环境并增加一些优化配置

项目源码在这里,看的舒服的话顺便给个star ><