笔记(2) 从webpack到vue-cli3.0

十年切图崽
2,514 阅读4分钟

写vue大概快写了两年了,从开始的element后台项目,到纯h5的移动端项目,但是一直没有总结过。然后最近想总结下,因为之前项目比较旧,用的一直是vue-cli@2.0版本的,最近看官网发现已经升级到vue-cli3.0了,刚好顺便对3.0做个学习以及总结。

webpack总结

其实webpack首先要明白它是用node写的,所以node的基础是要具备一些的,包括node的一些系统模块,还有一些基本的语法。因为之前没接触过这一块就直接写vue了,然后到后面配置webpack头都大了。除了node以外还以为了解一些基础的es6的知识,例如import,promise,async等等。详细请看。

a.模块的引入/导出

node的引入方式是CMD所以引入使用的是require('')而导出则是exports或module.exports。说到require就会让人想起import,两者的区别:

  • require引入遵循CMD方式,import则是es6的引入方式。
  • require是浅拷贝过程,import是解构过程。
  • require是在运行时调用,可放在代码任何位置。import是编译时调用,必须放在文件开头。

b.webpack的配置文件

webpack.config.js为webpack的配置文件,里面最基础的东西有:

module.exports={
  mode: 'development', // 有development/production 两个参数
  entry: { //如何文件
    index: './src/index',
    news: './src/news'
  },
  output: { //输出文件
    path: path.resolve(__dirname, 'dest'),
    filename: '[name].js'
  }
};

1.其中mode一般有三种情况:

  • none:不配置
  • development:用于配置开发环境
  • production:生产环境

2.entry则是入口参数,就是要打包的入口文件,如果入口文件多,输入文件则会多。

3.output输出文件,用来输出编译后的文件路径以及名称。

c.loader的用法

loader的作用是解决webpack不能识别js以外文件的问题,比方说.vue .scss .css 等等。要让webpack能编译这些文件,就需要使用loader去解决。

module: {
    rules: [
     {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
    ]
  },

从上面的例子可以看出,loader有两个属性:

  • test:用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  • loaders:表示进行转换时，应该使用哪个 loader。
  • options:表示配置详细参数,例如图片大小等.. 常用的loader有:url-loader babel-loader等.

dev-sever

用来搭建本地服务环境。(省略)

plugins

插件的目的就是为了解决loader实现不了的问题,最长用的插件就是HtmlWebpackPlugin,这部分也省略。

vue-cli3.0 项目配置

这个是常用的一个vue-cli3的项目结构,可以发现这个和vue-cli2的区别还是挺大的。主要体现在vue-cli2中包含了webpack的配置文件,但是vue-cli3中却没有。vue-cli3是开放了webpack的配置,但是需要在根目录上创建vue.config.js文件。详细其配置

a.chainWebpack

其实chainWebpack之所以可以修改webpack的配置,主要是因为vue-cli3.0的内部配置是根据webpack-chain维护的,提供了原始数据的抽象层,让它可以配置具名loader和具名插件。让我们来看看使用chainWebpack和普通的配置webpack的区别:

// vue.config.js 
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

// webpack.config.js
module: {
      rules: [
        {
            test: /\.vue$/,
            use:[{
                loader: 'vue-loader',
                options: vueLoaderConfig
            }]
          },
        ]
    }

从上面可以看出,两者其实没啥区别,前者是链式操作。详细的信息可以点击这里。

b.devServer

devServer主要是用来修改本地服务器。

devServer{
    open:true,
    proxy:{},//配置代理
    port:8080,
    host:'localhost',
    https: false, // 使用https提供服务
}

c.configureWebpack

configureWebpack如果是一个对象则会合并到最终的webpack的配置中ex:

module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

如果需要判断是生产环境或者开发环境则可以将configureWebpack设置为一个方法.ex:

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

d.完善部分配置

当我们正式搭建好vue-cli3.0时,会发现啥都不干,只是单纯的打包总体积都有120多k。而且这还是我们没有引入任何UI库的情况,这肯定是我们不能允许的,那么要如何解决这个问题?

可以使用webpack-bundle-analyzer 这个插件,这个插件主要可以分析我们打包后文件的体积,只有我们懂得各个文件的体积大小才能很好的压缩我们打包后的体积。使用方法:

//npm i webpack-bundle-analyzer 安装这个插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;//引入该插件

configureWebpack: config => {
     if (isPro) {
      return {
        plugins: [
          // 使用包分析工具
          new BundleAnalyzerPlugin({
            analyzerHost: "127.0.0.1",
            analyzerPort: 9006 // 运行后的端口号
          })
        ],
        externals: {
          vue: "Vue",
          vuex: "Vuex",
          "vue-router": "VueRouter"
        }
      };
    } else {
      console.log("dev");
    }
}

这样简单的使用,执行命令npm run build后就会出现一个网页,上面会显示你的打包后文件的信息。具体的BundleAnalyzerPlugin配置项可以点击这。

然后优化打包体积,目前来说我觉得最快捷,最懒的办法就是用cdn和gzip。所以在configureWebpack中添加这么一段代码,用处主要是在打包过程不会打包这些文件:

externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter"
}

这里我选了三个常用的库,然后就要为这三个库添加cdn了。最简单的方法就是在index.html文件中插入cdn。这样简单是简单了,但是坏处就是没法区分环境,最好的办法还是在打包的时候webpack自动为我们添加到html上就好了,只要在vue.config.js中添加

//vue.config.js 配置自己的cdn
const cdn = {
  js: [
    "https://cdn.bootcss.com/vue/2.5.9/vue.min.js",
    "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js",
    "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"
  ]
};
chainWebpack: config => {
  if (isPro) { //判断是什么环境
    config.plugin("html").tap(args => {
      args[0].cdn = cdn;
      return args;
    });
  }
  config.resolve.alias.set("@", resolve("src"));
},

//在index.html
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="'<%= htmlWebpackPlugin.options.cdn.js[i] %>'"></script>
<% } %>

就这样打包的时候就会自动为我们加上cdn了。 本文Demo

avatar
文章
阅读
粉丝