注釋：

①、點這里→webpack運行時的配置文檔傳送門

②、devDependencies和dependencies的區(qū)別： devDependencies里面的插件只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，即輔助作用，打包的時候需要，打包完成就不需要了。而dependencies是需要發(fā)布到生產(chǎn)環(huán)境的，自始至終都在。比如wepack等只是在開發(fā)中使用的包就寫入到devDependencies，而像vue這種項目全程依賴的包要寫入到devDependencies

點這里→更多安裝包文檔搜索頁傳送門

③、file-loader和url-loader的區(qū)別：以圖片為例，file-loader可對圖片進行壓縮，但是還是通過文件路徑進行引入，當http請求增多時會降低頁面性能，而url-loader通過設定limit參數(shù)，小于limit字節(jié)的圖片會被轉(zhuǎn)成base64的文件，大于limit字節(jié)的將進行圖片壓縮的操作?？偠灾?，url-loader是file-loader的上層封裝。

點這里→file-loader 和 url-loader詳解

點這里→file-loader文檔傳送門

點這里→url-loader文檔傳送門

2、.postcssrc.js

.postcssrc.js文件其實是postcss-loader包的一個配置，在webpack的舊版本可以直接在webpack.config.js中配置，現(xiàn)版本中postcss的文檔示例獨立出.postcssrc.js，里面寫進去需要使用到的插件

module.exports = {    "plugins": {      "postcss-import": {},//①      "postcss-url": {},//②      "autoprefixer": {}//③    }  }

注釋：

①、點這里→postcss-import文檔傳送門

②、點這里→postcss-url文檔傳送門

③、點這里→autoprefixer文檔傳送門

3、 .babelrc

該文件是es6解析的一個配置

{  //制定轉(zhuǎn)碼的規(guī)則    "presets": [    //env是使用babel-preset-env插件將js進行轉(zhuǎn)碼成es5，并且設置不轉(zhuǎn)碼的AMD,COMMONJS的模塊文件，制定瀏覽器的兼容      ["env", {        "modules": false,        "targets": {          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]        }      }],      "stage-2"    ],       "plugins": ["transform-vue-jsx", "transform-runtime"]//①  }

注釋：

①、點這里→transform-vue-jsx文檔傳送門

點這里→transform-runtime文檔傳送門

4、src內(nèi)文件

我們開發(fā)的代碼都存放在src目錄下，根據(jù)需要我們通常會再建一些文件夾。比如pages的文件夾，用來存放頁面讓components文件夾專門做好組件的工作；api文件夾，來封裝請求的參數(shù)和方法；store文件夾，使用vuex來作為vue的狀態(tài)管理工具，我也常叫它作前端的數(shù)據(jù)庫等。

①、assets文件：腳手架自動回放入一個圖片在里面作為初始頁面的logo。平常我們使用的時候會在里面建立js，css，img，fonts等文件夾，作為靜態(tài)資源調(diào)用

②、components文件夾：用來存放組件，合理地使用組件可以高效地實現(xiàn)復用等功能，從而更好地開發(fā)項目。一般情況下比如創(chuàng)建頭部組件的時候，我們會新建一個header的文件夾，然后再新建一個header.vue的文件夾

③、router文件夾：該文件夾下有一個叫index.js文件，用于實現(xiàn)頁面的路由跳轉(zhuǎn)，具體使用請點擊→vue-router傳送門

④、App.vue：作為我們的主組件，可通過使用開放入口讓其他的頁面組件得以顯示。

⑤、main.js：作為我們的入口文件，主要作用是初始化vue實例并使用需要的插件，小型項目省略router時可放在該處

注釋：具體vue的用法可查看vue官方中文文檔傳送門

5、其他文件

①、.editorconfig：編輯器的配置文件

②、.gitignore：忽略git提交的一個文件，配置之后提交時將不會加載忽略的文件

③、index.html：頁面入口，經(jīng)過編譯之后的代碼將插入到這來。

④、package.lock.json：鎖定安裝時的包的版本號，并且需要上傳到git，以保證其他人在npm install時大家的依賴能保證一致

⑤、README.md：可此填寫項目介紹

⑥、node_modules：根據(jù)package.json安裝時候生成的的依賴（安裝包）

三、config文件夾

├─config

│ ├─dev.env.js

│ ├─index.js

│ ├─prod.env.js

1、config/dev.env.js

config內(nèi)的文件其實是服務于build的，大部分是定義一個變量export出去。

'use strict'//采用嚴格模式  const merge = require('webpack-merge')//①  const prodEnv = require('./prod.env')  //webpack-merge提供了一個合并函數(shù)，它將數(shù)組和合并對象創(chuàng)建一個新對象。  //如果遇到函數(shù)，它將執(zhí)行它們，通過算法運行結果，然后再次將返回的值封裝在函數(shù)中.這邊將dev和prod進行合并  module.exports = merge(prodEnv, {    NODE_ENV: '"development"'  })

注釋：①、點這里→webpack-merge文檔傳送門

2、config/prod.env.js

當開發(fā)是調(diào)取dev.env.js的開發(fā)環(huán)境配置，發(fā)布時調(diào)用prod.env.js的生產(chǎn)環(huán)境配置

'use strict'  module.exports = {    NODE_ENV: '"production"'  }

3、config/index.js

'use strict'  const path = require('path')   module.exports = {    dev: {      // 開發(fā)環(huán)境下面的配置      assetsSubDirectory: 'static',//子目錄，一般存放css,js,image等文件      assetsPublicPath: '/',//根目錄      proxyTable: {},//可利用該屬性解決跨域的問題      host: 'localhost', // 地址      port: 8080, //端口號設置，端口號占用出現(xiàn)問題可在此處修改      autoOpenBrowser: false,//是否在編譯（輸入命令行npm run dev）后打開http://localhost:8080/頁面，以前配置為true，近些版本改為false，個人偏向習慣自動打開頁面      errorOverlay: true,//瀏覽器錯誤提示      notifyOnErrors: true,//跨平臺錯誤提示      poll: false, //使用文件系統(tǒng)(file system)獲取文件改動的通知devServer.watchOptions      devtool: 'cheap-module-eval-source-map',//增加調(diào)試，該屬性為原始源代碼（僅限行）不可在生產(chǎn)環(huán)境中使用      cacheBusting: true,//使緩存失效      cssSourceMap: true//代碼壓縮后進行調(diào)bug定位將非常困難，于是引入sourcemap記錄壓縮前后的位置信息記錄，當產(chǎn)生錯誤時直接定位到未壓縮前的位置，將大大的方便我們調(diào)試    },    build: {    // 生產(chǎn)環(huán)境下面的配置      index: path.resolve(__dirname, '../dist/index.html'),//index編譯后生成的位置和名字，根據(jù)需要改變后綴，比如index.php      assetsRoot: path.resolve(__dirname, '../dist'),//編譯后存放生成環(huán)境代碼的位置      assetsSubDirectory: 'static',//js,css,images存放文件夾名      assetsPublicPath: '/',//發(fā)布的根目錄，通常本地打包dist后打開文件會報錯，此處修改為./。如果是上線的文件，可根據(jù)文件存放位置進行更改路徑      productionSourceMap: true,      devtool: '#source-map',//①      //unit的gzip命令用來壓縮文件，gzip模式下需要壓縮的文件的擴展名有js和css      productionGzip: false,      productionGzipExtensions: ['js', 'css'],      bundleAnalyzerReport: process.env.npm_config_report    }  }

注釋：①點擊→devtool文檔傳送門

四、build文件夾

├─build

│ ├─build.js

│ ├─check-versions.js

│ ├─utils.js

│ ├─vue-loader.conf.js

│ ├─webpack.base.conf.js

│ ├─webpack.dev.conf.js

│ ├─webpack.prod.conf.js

1、build/build.js

該文件作用，即構建生產(chǎn)版本。package.json中的scripts的build就是node build/build.js，輸入命令行npm run build對該文件進行編譯生成生產(chǎn)環(huán)境的代碼。

'use strict'  require('./check-versions')()//check-versions：調(diào)用檢查版本的文件。加（）代表直接調(diào)用該函數(shù)  process.env.NODE_ENV = 'production'//設置當前是生產(chǎn)環(huán)境  //下面定義常量引入插件  const ora = require('ora')//①加載動畫  const rm = require('rimraf')//②刪除文件  const path = require('path')  const chalk = require('chalk')//③對文案輸出的一個彩色設置  const webpack = require('webpack')  const config = require('../config')//默認讀取下面的index.js文件  const webpackConfig = require('./webpack.prod.conf')  //調(diào)用start的方法實現(xiàn)加載動畫，優(yōu)化用戶體驗  const spinner = ora('building for production...')  spinner.start() //先刪除dist文件再生成新文件，因為有時候會使用hash來命名，刪除整個文件可避免冗余  rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {    if (err) throw err    webpack(webpackConfig, (err, stats) => {      spinner.stop()      if (err) throw err      process.stdout.write(stats.toString({        colors: true,        modules: false,        children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.        chunks: false,        chunkModules: false      }) + '\n\n')       if (stats.hasErrors()) {        process.exit(1)      }       console.log(chalk.cyan('  Build complete.\n'))      console.log(chalk.yellow(        '  Tip: built files are meant to be served over an HTTP server.\n' +        '  Opening index.html over file:// won\'t work.\n'      ))    })  })

注釋：

①、點這里→ora文檔傳送門

②、點這里→chalk文檔傳送門

③、點這里→rimraf文檔傳送門

2、build/check-version.js

該文件用于檢測node和npm的版本，實現(xiàn)版本依賴

'use strict'  const chalk = require('chalk')  const semver = require('semver')//①對版本進行檢查  const packageConfig = require('../package.json') const shell = require('shelljs')  function exec (cmd) {  //返回通過child_process模塊的新建子進程，執(zhí)行 Unix 系統(tǒng)命令后轉(zhuǎn)成沒有空格的字符串    return require('child_process').execSync(cmd).toString().trim()  }  const versionRequirements = [    {      name: 'node',      currentVersion: semver.clean(process.version),//使用semver格式化版本      versionRequirement: packageConfig.engines.node//獲取package.json中設置的node版本    }  ]    if (shell.which('npm')) {    versionRequirements.push({      name: 'npm',      currentVersion: exec('npm --version'),// 自動調(diào)用npm --version命令，并且把參數(shù)返回給exec函數(shù)，從而獲取純凈的版本號      versionRequirement: packageConfig.engines.npm    })  }  module.exports = function () {    const warnings = []    for (let i = 0; i < versionRequirements.length; i++) {      const mod = versionRequirements[i]       if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {      //上面這個判斷就是如果版本號不符合package.json文件中指定的版本號，就執(zhí)行下面錯誤提示的代碼        warnings.push(mod.name + ': ' +          chalk.red(mod.currentVersion) + ' should be ' +          chalk.green(mod.versionRequirement)        )      }    }      if (warnings.length) {      console.log('')      console.log(chalk.yellow('To use this template, you must update following to modules:'))      console.log()       for (let i = 0; i < warnings.length; i++) {        const warning = warnings[i]        console.log('  ' + warning)      }      console.log()     process.exit(1)    }  }

注釋：

①、點這里→chalk文檔傳送門

點這里→semver文檔傳送門

3、build/utils.js

utils是工具的意思，是一個用來處理css的文件。

'use strict'  const path = require('path') const config = require('../config')  const ExtractTextPlugin = require('extract-text-webpack-plugin')  const packageConfig = require('../package.json')  //導出文件的位置，根據(jù)環(huán)境判斷開發(fā)環(huán)境和生產(chǎn)環(huán)境，為config文件中index.js文件中定義的build.assetsSubDirectory或dev.assetsSubDirectory  exports.assetsPath = function (_path) {    const assetsSubDirectory = process.env.NODE_ENV === 'production'      ? config.build.assetsSubDirectory      : config.dev.assetsSubDirectory  //Node.js path 模塊提供了一些用于處理文件路徑的小工具①    return path.posix.join(assetsSubDirectory, _path)  }  exports.cssLoaders = function (options) {    options = options || {}  //使用了css-loader和postcssLoader，通過options.usePostCSS屬性來判斷是否使用postcssLoader中壓縮等方法    const cssLoader = {      loader: 'css-loader',      options: {        sourceMap: options.sourceMap      }    }   const postcssLoader = {      loader: 'postcss-loader',      options: {        sourceMap: options.sourceMap      }    }    function generateLoaders (loader, loaderOptions) {      const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]      if (loader) {        loaders.push({          loader: loader + '-loader',          //Object.assign是es6語法的淺復制，后兩者合并后復制完成賦值          options: Object.assign({}, loaderOptions, {            sourceMap: options.sourceMap          })        })      }           if (options.extract) {      //ExtractTextPlugin可提取出文本，代表首先使用上面處理的loaders，當未能正確引入時使用vue-style-loader        return ExtractTextPlugin.extract({          use: loaders,          fallback: 'vue-style-loader'        })      } else {      //返回vue-style-loader連接loaders的最終值        return ['vue-style-loader'].concat(loaders)      }    }    return {      css: generateLoaders(),//需要css-loader 和 vue-style-loader      postcss: generateLoaders(),//需要css-loader和postcssLoader  和 vue-style-loader      less: generateLoaders('less'),//需要less-loader 和 vue-style-loader      sass: generateLoaders('sass', { indentedSyntax: true }),//需要sass-loader 和 vue-style-loader      scss: generateLoaders('sass'),//需要sass-loader 和 vue-style-loader      stylus: generateLoaders('stylus'),//需要stylus-loader 和 vue-style-loader      styl: generateLoaders('stylus')//需要stylus-loader 和 vue-style-loader    }  }  exports.styleLoaders = function (options) {    const output = []    const loaders = exports.cssLoaders(options)      //將各種css,less,sass等綜合在一起得出結果輸出output    for (const extension in loaders) {      const loader = loaders[extension]      output.push({        test: new RegExp('\\.' + extension + '$'),        use: loader      })    }     return output  }   exports.createNotifierCallback = () => {  //發(fā)送跨平臺通知系統(tǒng)    const notifier = require('node-notifier')     return (severity, errors) => {      if (severity !== 'error') return  //當報錯時輸出錯誤信息的標題，錯誤信息詳情，副標題以及圖標      const error = errors[0]      const filename = error.file && error.file.split('!').pop()      notifier.notify({        title: packageConfig.name,        message: severity + ': ' + error.name,        subtitle: filename || '',        icon: path.join(__dirname, 'logo.png')      })    }  }

注釋：

①、path.posix：提供對路徑方法的POSIX（可移植性操作系統(tǒng)接口）特定實現(xiàn)的訪問，即可跨平臺，區(qū)別于win32。

path.join：用于連接路徑，會正確使用當前系統(tǒng)的路徑分隔符，Unix系統(tǒng)是"/"，Windows系統(tǒng)是""

點擊→path用法傳送門

4、vue-loader.conf.js

該文件的主要作用就是處理.vue文件，解析這個文件中的每個語言塊（template、script、style),轉(zhuǎn)換成js可用的js模塊。

'use strict'  const utils = require('./utils')  const config = require('../config')  const isProduction = process.env.NODE_ENV === 'production'  const sourceMapEnabled = isProduction    ? config.build.productionSourceMap    : config.dev.cssSourceMap  //處理項目中的css文件，生產(chǎn)環(huán)境和測試環(huán)境默認是打開sourceMap，而extract中的提取樣式到單獨文件只有在生產(chǎn)環(huán)境中才需要  module.exports = {    loaders: utils.cssLoaders({      sourceMap: sourceMapEnabled,      extract: isProduction    }),    cssSourceMap: sourceMapEnabled,   cacheBusting: config.dev.cacheBusting,   // 在模版編譯過程中，編譯器可以將某些屬性，如 src 路徑，轉(zhuǎn)換為require調(diào)用，以便目標資源可以由 webpack 處理.    transformToRequire: {      video: ['src', 'poster'],      source: 'src',      img: 'src',      image: 'xlink:href'    }  }

5、webpack.base.conf.js

webpack.base.conf.js是開發(fā)和生產(chǎn)共同使用提出來的基礎配置文件，主要實現(xiàn)配制入口，配置輸出環(huán)境，配置模塊resolve和插件等

'use strict'  const path = require('path')  const utils = require('./utils')  const config = require('../config')  const vueLoaderConfig = require('./vue-loader.conf')   function resolve (dir) {  //拼接出絕對路徑    return path.join(__dirname, '..', dir)  }  module.exports = {  //path.join將路徑片段進行拼接，而path.resolve將以/開始的路徑片段作為根目錄，在此之前的路徑將會被丟棄  //path.join('/a', '/b') // 'a/b',path.resolve('/a', '/b') // '/b'    context: path.resolve(__dirname, '../'),    //配置入口，默認為單頁面所以只有app一個入口    entry: {      app: './src/main.js'    },    //配置出口，默認是/dist作為目標文件夾的路徑    output: {      path: config.build.assetsRoot,//路徑      filename: '[name].js',//文件名      publicPath: process.env.NODE_ENV === 'production'        ? config.build.assetsPublicPath        : config.dev.assetsPublicPath//公共存放路徑    },    resolve: {    //自動的擴展后綴，比如一個js文件，則引用時書寫可不要寫.js      extensions: ['.js', '.vue', '.json'],      //創(chuàng)建路徑的別名，比如增加'components': resolve('src/components')等      alias: {        'vue$': 'vue/dist/vue.esm.js',        '@': resolve('src'),      }    },    //使用插件配置相應文件的處理方法    module: {      rules: [      //使用vue-loader將vue文件轉(zhuǎn)化成js的模塊①        {          test: /\.vue$/,          loader: 'vue-loader',          options: vueLoaderConfig        },        //js文件需要通過babel-loader進行編譯成es5文件以及壓縮等操作②        {          test: /\.js$/,          loader: 'babel-loader',          include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]        },       //圖片、音像、字體都使用url-loader進行處理，超過10000會編譯成base64③        {          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]')          }        }     ]    },    //以下選項是Node.js全局變量或模塊，這里主要是防止webpack注入一些Node.js的東西到vue中     node:       setImmediate: false,      dgram: 'empty',      fs: 'empty',      net: 'empty',      tls: 'empty',      child_process: 'empty'    }  }

注釋：

①、點擊→vue-loader文檔傳送門

②、點擊→babel-loader文檔傳送門

6、webpack.dev.conf.js

'use strict'  const utils = require('./utils')  const webpack = require('webpack')  const config = require('../config')  //通過webpack-merge實現(xiàn)webpack.dev.conf.js對wepack.base.config.js的繼承  const merge = require('webpack-merge')  const path = require('path')  const baseWebpackConfig = require('./webpack.base.conf')  const CopyWebpackPlugin = require('copy-webpack-plugin')  const HtmlWebpackPlugin = require('html-webpack-plugin')  //美化webpack的錯誤信息和日志的插件①  const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')  const portfinder = require('portfinder')// 查看空閑端口位置，默認情況下搜索8000這個端口②  const HOST = process.env.HOST//③processs為node的一個全局對象獲取當前程序的環(huán)境變量，即host  const PORT = process.env.PORT && Number(process.env.PORT)   const devWebpackConfig = merge(baseWebpackConfig, {    module: {    //規(guī)則是工具utils中處理出來的styleLoaders，生成了css，less,postcss等規(guī)則      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })    },     devtool: config.dev.devtool,  //增強調(diào)試，上文有提及    //此處的配置都是在config的index.js中設定好了    devServer: {//④      clientLogLevel: 'warning',//控制臺顯示的選項有none, error, warning 或者 info      //當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html      historyApiFallback: {        rewrites: [          { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },        ],      },      hot: true,//熱加載      contentBase: false,      compress: true,//壓縮      host: HOST || config.dev.host,      port: PORT || config.dev.port,      open: config.dev.autoOpenBrowser,//調(diào)試時自動打開瀏覽器      overlay: config.dev.errorOverlay        ? { warnings: false, errors: true }        : false,// warning 和 error 都要顯示      publicPath: config.dev.assetsPublicPath,      proxy: config.dev.proxyTable,//接口代理      quiet: true, //控制臺是否禁止打印警告和錯誤,若用FriendlyErrorsPlugin 此處為 true      watchOptions: {        poll: config.dev.poll,//// 文件系統(tǒng)檢測改動      }    },    plugins: [      new webpack.DefinePlugin({        'process.env': require('../config/dev.env')      }),      new webpack.HotModuleReplacementPlugin(),//⑤模塊熱替換插件，修改模塊時不需要刷新頁面      new webpack.NamedModulesPlugin(), // 顯示文件的正確名字      new webpack.NoEmitOnErrorsPlugin(),//當webpack編譯錯誤的時候，來中端打包進程，防止錯誤代碼打包到文件中      // https://github.com/ampedandwired/html-webpack-plugin      // 該插件可自動生成一個 html5 文件或使用模板文件將編譯好的代碼注入進去⑥      new HtmlWebpackPlugin({        filename: 'index.html',        template: 'index.html',        inject: true      }),      new CopyWebpackPlugin([//復制插件        {          from: path.resolve(__dirname, '../static'),          to: config.dev.assetsSubDirectory,          ignore: ['.*']//忽略.*的文件        }      ])    ]  })   module.exports = new Promise((resolve, reject) => {    portfinder.basePort = process.env.PORT || config.dev.port    //查找端口號    portfinder.getPort((err, port) => {      if (err) {        reject(err)      } else {      //端口被占用時就重新設置evn和devServer的端口        process.env.PORT = port        devWebpackConfig.devServer.port = port        //友好地輸出信息        devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({          compilationSuccessInfo: {            messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],          },          onErrors: config.dev.notifyOnErrors          ? utils.createNotifierCallback()          : undefined        }))        resolve(devWebpackConfig)      }    })  })

注釋：

①、點擊→friendly-errors-webpack-plugin文檔傳送門

②、點擊→process文檔傳送門

③、點擊→babel-loader文檔傳送門

④、點擊→devtool文檔傳送門

⑤、點擊→webpack的HotModuleReplacementPlugin文檔傳送門

⑥、點擊→html-webpack-plugin文檔傳送門

7、webpack.prod.conf.js

'use strict'  const path = require('path')  const utils = require('./utils')  const webpack = require('webpack')  const config = require('../config')  const merge = require('webpack-merge')  const baseWebpackConfig = require('./webpack.base.conf')  const CopyWebpackPlugin = require('copy-webpack-plugin')  const HtmlWebpackPlugin = require('html-webpack-plugin')  const ExtractTextPlugin = require('extract-text-webpack-plugin')  const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')  const UglifyJsPlugin = require('uglifyjs-webpack-plugin')   const env = require('../config/prod.env')  const webpackConfig = merge(baseWebpackConfig, {    module: {    //調(diào)用utils.styleLoaders的方法      rules: utils.styleLoaders({        sourceMap: config.build.productionSourceMap,//開啟調(diào)試的模式。默認為true        extract: true,        usePostCSS: true      })    },    devtool: config.build.productionSourceMap ? config.build.devtool : false,    output: {      path: config.build.assetsRoot,      filename: utils.assetsPath('js/[name].[chunkhash].js'),      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')    },    plugins: [      new webpack.DefinePlugin({        'process.env': env      }),      new UglifyJsPlugin({        uglifyOptions: {          compress: {//壓縮            warnings: false//警告：true保留警告，false不保留          }        },        sourceMap: config.build.productionSourceMap,        parallel: true      }),     new ExtractTextPlugin({//抽取文本。比如打包之后的index頁面有style插入，就是這個插件抽取出來的，減少請求        filename: utils.assetsPath('css/[name].[contenthash].css'),          allChunks: true,      }),           new OptimizeCSSPlugin({//優(yōu)化css的插件        cssProcessorOptions: config.build.productionSourceMap          ? { safe: true, map: { inline: false } }          : { safe: true }      }),          new HtmlWebpackPlugin({//html打包        filename: config.build.index,        template: 'index.html',        inject: true,        minify: {//壓縮          removeComments: true,//刪除注釋          collapseWhitespace: true,//刪除空格          removeAttributeQuotes: true//刪除屬性的引號           },              chunksSortMode: 'dependency'//模塊排序，按照我們需要的順序排序      }),           new webpack.HashedModuleIdsPlugin(),      new webpack.optimize.ModuleConcatenationPlugin(),      new webpack.optimize.CommonsChunkPlugin({//抽取公共的模塊        name: 'vendor',        minChunks (module) {           return (            module.resource &&            /\.js$/.test(module.resource) &&            module.resource.indexOf(              path.join(__dirname, '../node_modules')            ) === 0          )        }      }),      new webpack.optimize.CommonsChunkPlugin({        name: 'manifest',        minChunks: Infinity      }),      new webpack.optimize.CommonsChunkPlugin({        name: 'app',        async: 'vendor-async',        children: true,        minChunks: 3      }),      new CopyWebpackPlugin([//復制，比如打包完之后需要把打包的文件復制到dist里面        {          from: path.resolve(__dirname, '../static'),          to: config.build.assetsSubDirectory,          ignore: ['.*']        }      ])    ]  })    if (config.build.productionGzip) {    const CompressionWebpackPlugin = require('compression-webpack-plugin')     webpackConfig.plugins.push(      new CompressionWebpackPlugin({        asset: '[path].gz[query]',        algorithm: 'gzip',        test: new RegExp(          '\\.(' +          config.build.productionGzipExtensions.join('|') +          ')$'        ),        threshold: 10240,        minRatio: 0.8      })    )  }   if (config.build.bundleAnalyzerReport) {    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin    webpackConfig.plugins.push(new BundleAnalyzerPlugin())  }   module.exports = webpackConfig

感謝各位的閱讀，以上就是“vue-cli腳手架中webpack配置基礎文件有哪些”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對vue-cli腳手架中webpack配置基礎文件有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！