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

做者混元霹雳手-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