Hand Tear VUE-CLI Configuration--webpack.base.conf.js Chapter

Before we start writing webpack.base.conf.js (base), let's take a look at the Vue-loader.conf.js file, after all, we'll use it in base:

' Use strict '//introducing the Utils file for the previous articleConst UTILS = require ('./utils '))//introducing the config fileConst CONFIG = require ('.. /config ')//determines whether the current production environment, if yes, returns TrueConst Isproduction = Process.env.NODE_ENV = = = ' Production '//whether to use Sourcemap, if a production environment is used in the configuration of the production environment in Index.js in the config file, or if the configuration of the development environmentConst SOURCEMAPENABLED =isproduction?Config.build.productionSourceMap:config.dev.cssSourceMapmodule.exports= {  //utils file Cssloaders Returns the configuration item that is returned in the format  /*loaders:{css:ExtractTextPlugin.extract ({use: [Cssloader], fallback: ' Vue-style-loader '    }), postcss:{...} }    */loaders:utils.cssLoaders ({sourcemap:sourcemapenabled, extract:isproduction}),//whether to use Sourcemapcsssourcemap:sourcemapenabled,//whether to use cachebusting, this configuration is mentioned in the config articlecacheBusting:config.dev.cacheBusting,

Next, let's look at the Webpack.base.conf.js file

Const PATH = require (' path ') Const Utils= require ('./utils ')) Const Config= require ('.. /config ') Const Vueloaderconfig= require ('./vue-loader.conf '))//The Resolve function returns a file or folder under the root pathfunctionResolve (dir) {returnPath.join (__dirname, ' ... '), dir)} Module.exports= {  //return root PathContext:path.resolve (__dirname, ' ... /‘),  //set up a portal fileentry: {app:'./src/main.js '  },  //Export Documentsoutput: {//according to the Config module, it is the Dist folder under the root directory.path:config.build.assetsRoot, FileName:' [Name].js ',    //common path, unified as "/"PublicPath:process.env.NODE_ENV = = = ' Production '?Config.build.assetsPublicPath:config.dev.assetsPublicPath}, resolve: {//Automatic parsing extension, Js,vue,json these three-format file references without the need to add extensions    //import File from '. /path/to/file 'Extensions: ['. js ', '. Vue ', '. JSON '], alias: {//exact match, using Vue to replace the vue/dist/vue.esm.js path' vue$ ': ' Vue/dist/vue.esm.js ',      //using the @ instead of the SRC path, when you introduce the file under SRC You can use the import xx from "@/xx.js"' @ ': Resolve (' src ')),}}, module: {rules: [//configuration in Vue-loader,module to view Webpack documents{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] ')        }      }    ]  },

Hand Tear VUE-CLI Configuration--webpack.base.conf.js Chapter