webpackwebpack.base.conf.js基础配置

Posted 2021-01-22 teemor

var path = require(‘path‘) // node路径模块

var utils = require(‘./utils‘)  // 对vue-loader对于css预编译一些提取的工具模块，因为对于个人开发而言，在里面提供了，sass,less,stylus,possCss等一些列预编译解析的loader

var config = require(‘../config‘) // 对开发环境和生产环境的一系列不同参数的，路径等配置
  
var vueLoaderConfig = require(‘./vue-loader.conf‘) // 基础生产环境和开发环境对vue-loader进行的配置

 

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

封装函数，进行传参，获取绝对路径，方便对import时引入地址的填写
path.join ：对多个字符串进行拼接

 

 entry: {
    app: ‘./src/main.js‘
  },
打包的入口js文件

 

output: {
    path: config.build.assetsRoot, (config.build.assetsRoot===path.resolve(_dirname,‘../dist‘)作者把想打包出来的文件领放在根目录下的dist目录下)
    filename: ‘[name].js‘, 用来打包出的文件名，因为会打包出来的文件是三个文件，一个是自己的源代码文件，一个是runtime文件，一个是ventor文件
    publicPath: process.env.NODE_ENV === ‘production‘  静态文件访问的路径，根据静态文件的loader进行拼接配置，当进行环境是生产环境的话，我们就用config文件中的config.build.assetsPublicPath这个属性，如果是生产环境，则用config.dev.assetsPulicPath
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
output是我们输文件输出的路径

 

 resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],是对模块的后缀进行解析，当我们引入自己写的模块的时候，没有带js后缀，那文件会不会识别，本质上不会识别，但是有了这个配置，会先对.js后缀进行匹配，没有再匹配.vue，没有在匹配.json，还是没有找到的话，则会报错

    alias: { 
　　　　‘vue$‘: ‘vue/dist/vue.esm.js‘, 配置别名，如果你在一个很深的文件引入其他文件中有一个很深的文件，我们就用@来代替src
　　　　 ‘@‘: resolve(‘src‘) 
   } 
},
relove是用来对模块进行解析，就是所谓的Libary第三方库

 

 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]‘)
        }
      }
    ]
  }

test:用来解析所有后缀为*的文件

loader:用什么Npm的形式的loader去解析

include：代表我们解析的文件只包含那些东西

options：是对解析文件参数配置，对于url-loader来说limit1000代表当小时1000kb的文件我们则可以砖面base64，name对输出的内容进行地址转换

对解析文件的参数配置