vue-cli腳手架之webpack.base.conf.js


webpack相關的重要配置文件將在這一節給出。webpack水很深啊^o^,在此先弄清楚原配文件內容的含義,后續可以自己根據實際情況配置。

 

webpack.base.conf.js:配置vue開發環境的webpack配置,處理各種文件(js啊、css啊、html啊...)

'use strict'//js嚴格模式執行
const path = require('path')//引入node.js路徑模塊
const utils = require('./utils')//引入utils工具模塊,主要處理css-loader和vue-style-loader
const config = require('../config')//引入config文件夾下的index.js文件
const vueLoaderConfig = require('./vue-loader.conf')//引入vue-loader工具模塊 function resolve (dir) {//返回當前目錄的平行目錄的路徑 return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {//輸入
    app: './src/main.js'//入口文件為main.js
  },
  output: {//輸出
    path: config.build.assetsRoot,//打包后文件輸出路徑看看自己的index.js中build配置中的assetsRoot是啥目錄
    filename: '[name].js',//輸出文件名稱默認使用原名
    publicPath: process.env.NODE_ENV === 'production'//真正的文件引用路徑,請看自己的index.js中build配置中寫的啥
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {//決定要做的事情
    extensions: ['.js', '.vue', '.json'],//省略擴展名,也就是說當使用.js .vue .json文件導入可以省略后綴名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',//$符號指精確匹配,路徑和文件名要詳細 '@': resolve('src'),//resolve('src‘)//resolve('src')指的是項目根目錄中的src文件夾目錄,導入文件的時候路徑可以這樣簡寫 import somejs from "@/some.js"就可以導入指定文件
    }
  },
//用來解析不同模塊 module: { rules: [ { test:
/\.vue$/,//正則表達式,表示當前loader能檢測.vue類型的文件(分析這個正則:/標記正則表達式的開始和結束,指的是在開始和結尾處哦,否則要使用/就得轉義\/;\.表示.,此處的\將.標記為原意字符;$是正則表達式的結束?這個我不知道...) loader: 'vue-loader',//對vue文件使用vue-loader,該loader是vue單文件組件的實現核心,解析.vue文件 options: vueLoaderConfig//將vueLoaderConfig當做參數傳遞給vue-loader,解析css相關文件 }, { test: /\.js$/, loader: 'babel-loader',//對js文件使用babel-loader轉碼,該插件用來解析es6等代碼 include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]//指明src文件夾 test文件夾 client文件夾下的js文件要使用該loader }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,//這些格式結尾的圖片文件 loader: 'url-loader',//圖片文件使用url-loader插件,將圖片轉為base64格式字符串 options: { limit: 10000,//10000個字節以下的文件才用來轉為dataUrl name: utils.assetsPath('img/[name].[hash:7].[ext]')//超過10000字節的圖片,就按照制定規則設置生成的圖片名稱,可以看到用了7位hash碼來標記,.ext文件是一種索引式文件系統 } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//音頻 視頻類文件 loader: 'url-loader',//也是用url-loader options: { limit: 10000,//10000個字節以下的文件才進行轉換 name: utils.assetsPath('media/[name].[hash:7].[ext]')//這個name到底是給誰起的啊喂,給超過limit字節限制的文件起的 } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//處理字體相關 loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, /*添加sass開始*/ { test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,//這個可以在vue組件中用sass scss等... loaders:['style','css','sass'], } /*添加sass結束*/ ] }, node: {//一個對象,每個屬性都是node.js全局變量或模塊的名稱,value為empty表示提供空對象 // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false,//false表示什么都不提供,話說參數setImmediate表示異步遞歸???需要查閱node文檔了 // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM