史上最详细的webpack 讲解3 (webpack.base.conf.js基础配置)

10,496 阅读5分钟

作者混元霹雳手-Ziksang

隔了好几天了,我终于又出来了,今天我给大家讲讲vue-cli中webpack.base.conf.js的基础配置,看看尤大神对这些配置做了那些重要性的处理的,不用看webpack-cli已经是一个很成熟的脚手架了,对于它的配置在webpack的更新中,作者也不停的更新,其中也有其实中的函意和道理

首先对引入的模块有那些,那为什么要引入这些模块

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

1.path模块不用说大家肯定都知道,是理一些路径的,无论是在这个配置里还其它配置中,这个是必不可少的
2.util是对vue-loader对于css预编译一些提取的工具模块,因为对于个人开发而言,在里面提供了,sass,less,stylus,possCss等一系列预编译解析的loader
3.config是对开发环境和生产环境的一系列不同参数的,路径等配置
4.vueLoaderConfig也是同样基础生产环境和开发环境对vue-loader进行的配置

以上四点虽然讲的很笼统,但是基于这些东西,起码大家心里有个印象,知道那些东西是干麻的,不会很迷茫的看这些东西

接下来往下面看看

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
`

这封装了一个函数,进行传参,获取绝对路径,方便对import时引入地址的方便填写

path.join()是对多个字符串进行拼接

此时__dirname是build文件路径..代表再出去一层,就是文件的根路径,那dir这个参数则是你要传的文件夹,如果我们传src的话就是从src目录开始找

  entry: {
    app: './src/main.js'
  },

我们打包的时候入口js文件肯定是main.js如果你强烈自己想换文件名也没有问题,但是有一点,如果无论是执行的是build.js还是dev-sever.js这个路径应该是../src/main.js但是为是当前路径呢,因为有一个content执行上下文的东西,默认执行的就是你的根目录

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

output是我们输文件输出的路径
1.path代表我们要输出的路径,我们去看看config.build.assetsRoot里面是什么东西,assetsRoot: path.resolve(__dirname, '../dist'),找了一下是这个玩意,可以看出来作者想把打包出来的文件路径放在根目录下的dist目录下
2.filename: '[name].js' 文件名,这个是用来打包名出的文件名,为什么要用[name]呢,因为会打包出来三个文件,第一个是自己的原代码文件,第二个是runtime文件,第三个是ventor文件,所以每个文件打包出来的名字,就跟定义的chunkname一致

  publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath

这个是静太文件访问的路径,这个要根据你静态文件的loader进行拼接配置,后面会跟大家讲,这样会更清楚一点,我们先看来这段是什么意思,当进行环境是生产环境 的话我们就用config文件中config.build.assetsPublicPath这个属性,如果是生产环境 ,我们则用config.dev.assetsPublicPath中的属性,那两者都是“/”,先大致理解,往后面看你就知道了

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },

接下来就是resolve配置了,看看这个配置里面用了那些东西
resolve是用来对模块进行解析,就是所谓的libary第三方库
1.extensions 是对模块的后缀进行解析,当我们引入自己写的模块,比方说var config = require('../config') webpack.base里引入了config模块的时候,没有带js后缀,那文件会不会识别,本质上不会识别,但是有了这个配置,会先进.js后缀进行匹配,没有再匹配.vue,没有再匹配.json,还是没有找到的话,则会报错,文件没有找到no find

2.alias 是配置别名,什么是别名呢,如果你在一个很深的文件引入其它文件中又一个很深的文件,你会很烦,相对路径会写吐血,那用别名我们定入一个入口位置,我们@来代替src目录的绝对路径,此时就用到了上面function resolve封装的函数,此时就绝对路径就定位到了src目录,因为我们所有文件都放在src目录下,我们就可以通过src目录直接定位到你想要找的文件

   module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件(img src=...)中的图片链接(image url)
对于这个模块是webpack开箱即用的,不用我们去配置这个模块转换

我们看看这个参数是用来干麻的
1.test是用来解析所有.vue后缀的文件,
2.loader我们用什么npm什么形式的loader去解析
3.include是代表我们解析的文件只包含那些东西
比方说babel-loader是进行es6转换成es5的,但是考虑性能问题,打包时间问题,我们不考虑解析node-module里的文件
include: [resolve('src'), resolve('test')] 这里用一个数组来包括的要解析的文件夹路径,还是再次用到了relsove这个封装的函数

options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }

options是对解析文件参数配置
1.对于url-loader来说 limit10000代表当小时1000kb的文件我们则可以转面base64
2.name : 对输出的内容地行地址转换,当我们一个图在dev开发的时候用../../aa/aa.jpg,你想到生产环境地址肯定不会对那怎么样此时就要用到地址转换

前面讲到 publicPath是用来干麻的,当我们转换的时候,是用publicPath公共路径+name路径名返回的址,
那utils.assetsPath()又是什么?
我们去找找看

exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

这个我是在uilts.js工具库模块中找到的,也是封装成了一个方法,先看进程是开发环境还是生产环境,指向的都是static文件夹

path.posix.join(assetsSubDirectory, _path)是node的一个兼容性写法,如果我们用
utils.assetsPath('img/[name].[hash:7].[ext]')方法来调用的话,最后返回就是
/static/img/aa42432432423.jpg 就是publicpath+/static/图片名+hash+图片后缀来进行返回。你们在vue-cli中引入一个图看你们看看,就能看到结果了

options: vueLoaderConfig
是对vue文件的style样式进行解析,解析编译,再进行ExtractTextPlugin来进行合并,等我这把这个研究透了,再来和大家说,大致意思就是这么玩

你说vue难还是webpack难,我跟你说 webpack难。哈哈,自己去体会吧

渣渣前端开发工程师,喜欢钻研,热爱分享和讲解教学, 微信 zzx1994428 QQ494755899

支持我继续创作和感到有收获的话,请向我打赏点吧

如果转载请标注出自@混元霹雳手-ziksang