webpack.base.conf详解

'use strict'
//1、path模块是路径设置,不论是在这个配置中还是其他配置中,都是必不可少的。
//2、util是对vue-loader对于css预编译一些提取的工具模块,因为对于个人开发而言,里面提供了sass,less,stylus,possCss等一系列预编译解析的loader。
//3、config是对开发环境和生产环境的一系列不同参数的路径等配置。
//4、vueLoaderConfig也是同样基础生产环境和开发环境对vue-loader进行配置。
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

//这是一个封装函数,进行传参,获取绝对路径,方便对import时引入地址的方便填写。
//path.join()是对多个字符串进行拼接,此时__dirname是build文件路径..代表在出去一层,就是文件的根路径,dir这个参数则是你要传的文件夹,如果我们传crs的话就从src目录开始查找。
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    //main.js是webpack的入口文件,在main.js中加载的是App.vue文件,所以App.vue是渲染的入口,在main.js的里面#app指代的是index.html里的id为app的DOM元素。
    app: './src/main.js'   
  },
  //output是我们输出文件的路径。
 
  output: {
    //1、path代表我们要输出的路径,config.build.assetsRoot里是assetsRoot: path.resolve(__dirname, '../dist'),这个是想把打包出来的文件路径放在根目录的dist目录下。
    path: config.build.assetsRoot,
    //2、filename: '[name].js'文件名,这个是用来打包后出的文件名,为什么用name,因为会打包出来三个文件,第一个是源代码文件,第二个是runtime文件,第三个是ventor文件,所以每个文件打包出来的名字就跟定义的chunkname一致。
    filename: '[name].js',
    //3、publicPath...是静态文件访问的路径,这个要根据你的静态文件的loader进行拼接配置。
    //当进行环境是生产环境的话我们就用config文件中config.build.assetsPublicPath这个属性
    //如果是生产环境 ,我们则用config.dev.assetsPublicPath中的属性,
    //两者都是“/”
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  //resolve是用来对模块进行解析,就是所谓的libary第三方库
  resolve: {
    //extensions 是用来对模块的后缀进行解析,当我们引入自己写的模块,比方说:
    //var config = require('../config') webpack.base里引入了config模块的时候,没有带js后缀,
    //文件本质上是不会识别的,但有了这个配置,会先进行.js后缀进行匹配,没有在匹配.vue,没有在匹配
    //.json,如果还是没有找到就会报错,文件没有找到no find.
    extensions: ['.js', '.vue', '.json'],
    //2、alias是配置别名,什么是别名呢,如果你在一个很深的文件引入其他文件中又一个很深的文件,
    //相对路径会写到吐血,那用别名我们定入一个入口位置,我们用@来代替src目录的绝对路径,此时就
    //用到了上面function resolve封装的函数,此时绝对路径就定位到了src目录,因为我们所有文件
    //都放在src目录下,就可以通过src目录直接定位到你想要找的文件。
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
        //1、test是用来解析所有.vue后缀的文件
        //2、loader我们用什么npm什么形式的loader去解析
        //3、include是代表我们解析的文件只包含那些东西。
        //比方说babel-loader是进行es6转换成es5的,但是考虑性能问题,打包时间问题,
        //我们不考虑解析node-module里的文件include: [resolve('src'), resolve('test')]
        //这里用一个数组来包括的要解析的文件夹路径,还是再次用到了relsove这个封装的函数
        //options是对解析文件参数配置
        //1.对于url-loader来说 limit10000代表当小时1000kb的文件我们则可以转面base64
        //2.name : 对输出的内容地行地址转换,当我们一个图在dev开发的时候用../../aa/aa.jpg,
        //你想到生产环境地址肯定不会对那怎么样此时就要用到地址转换
        //options: vueLoaderConfig 是对vue文件的style样式进行解析,解析编译,再进行ExtractTextPlugin来进行合并
      {
        // 对所有.vue文件使用vue-loader
        test: /\.vue$/,
        loader: 'vue-loader',
         options: vueLoaderConfig
      },
      {
        // 对src和test文件夹下的.js文件使用babel-loader
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        // 对图片资源文件使用url-loader,query.name指明了输出的命名规则
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        //对字体资源文件使用url-loader,query.name指明了输出的命名规则
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值