在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到:
‘use strict‘ //引入前一篇文章的utils文件 const utils = require(‘./utils‘) //引入config文件 const config = require(‘../config‘) //判断当前是否为生产环境,如果是则返回true const isProduction = process.env.NODE_ENV === ‘production‘ //是否使用sourceMap,如果是生产环境就使用config文件中index.js中生产环境的配置,否则是否开发环境的配置 const sourceMapEnabled = isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap module.exports = { //utils文件cssLoaders返回的配置项,返回的格式为 /* loaders:{ css:ExtractTextPlugin.extract({ use: [cssLoader], fallback: ‘vue-style-loader‘ }), postCss:{ ....... } } */ loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction }), //是否使用sourceMap cssSourceMap: sourceMapEnabled, //是否使用cacheBusting,这个配置在config的文章中提到过 cacheBusting: config.dev.cacheBusting,
接下来,我们来看webpack.base.conf.js文件
const path = require(‘path‘) const utils = require(‘./utils‘) const config = require(‘../config‘) const vueLoaderConfig = require(‘./vue-loader.conf‘) //resolve函数返回根路径下的文件或文件夹 function resolve (dir) { return path.join(__dirname, ‘..‘, dir) } module.exports = { //返回根路径 context: path.resolve(__dirname, ‘../‘), //设置入口文件 entry: { app: ‘./src/main.js‘ }, //出口文件 output: { //根据config模块得知是根目录下的dist文件夹 path: config.build.assetsRoot, filename: ‘[name].js‘, //公共路径,统一为“/” publicPath: process.env.NODE_ENV === ‘production‘ ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { //自动解析的扩展,js,vue,json这三种格式的文件引用时不需要加上扩展了 // import File from ‘../path/to/file‘ extensions: [‘.js‘, ‘.vue‘, ‘.json‘], alias: { //精准匹配,使用vue来替代vue/dist/vue.esm.js路径 ‘vue$‘: ‘vue/dist/vue.esm.js‘, //使用@替代src路径,当你引入src下的文件是可以使用import xx from "@/XX.js" ‘@‘: resolve(‘src‘), } }, module: { rules: [ //vue-loader,module里的配置可以查看webpack文档 { test: /\.vue$/, loader: ‘vue-loader‘, options: vueLoaderConfig }, { test: /\.js$/, loader: ‘babel-loader‘, include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/webpack-dev-server/client‘)] }, { 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]‘) } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: ‘url-loader‘, options: { limit: 10000, name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘) } } ] },