vue全家桶系列之vue-cli(三)

嗲嗲嗲嗲死你

文章目次

• 
  
  
  
  • 
    
    
    
    • 1.媒介
      
    • 2.webpack设置
      
      
    
  
  

1.媒介

上一篇文章对全部项目标目次构造举办理解道，那末那篇文章我们来讲下webpack设置相干的文件，webpack是当前最流行的构建东西，以是有须要对它举办理解！
2.webpack设置

我们先 npm run dev启动项目,再翻开浏览器,F12去看下恳求的文件，那内里恳求了一个app.js文件，可是检察下index.html模版内里并出有那个文件！实在皆是webpack的功用，它会把app.js文件主动的插进到index.html模版内里

接下去我们次要去阐发下webpack设置，它的设置次要正在build,另有config文件夹内里，那么多js文件，那末便要从进口文件看，找到package.json文件,内里有个script,内里是我们定义的一些剧本！而且能够借助npm script去施行号令剧本！

1. "scripts": {
2.     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
3.     "start": "npm run dev",
4.     "lint": "eslint --ext .js,.vue src",
5.     "build": "node build/build.js"
6.   },

复造代码

先道下webpack-dev-server，webpack-dev-server是一个当地开辟东西，启动一个当地的效劳器，能够用去处置挨包资本战静态文件的恳求，而且会将挨包结果放正在内乱存中，正在每次webpack-dev-server担当到恳求时皆只是将内乱存的中的挨包返回给浏览器（您能够经由过程删除工程中的dist目次去考证，您会发明即便dist目次没有存正在，革新页里功用仍旧能够一般运转 ），另有它的live-reloading功用（主动革新）能够监听文件的变化，主动革新页里去提拔开辟服从的，以是webpack-dev-server普通正在当地开辟才会用到！
再去看"dev"战"start",那末 npm run dev 战npm run start 皆是用webpack-dev-server来施行build上面的webpack.dev.conf.js设置，那个是开辟情况的设置,"build"便是消费情况的设置了，以是npm run build便是node来施行 build文件下的build.js文件了，再别离去看下build战config下的文件

先去看下build文件夹的文件，看上面：
1. build.js是构建开辟的情况的剧本文件，npm run build所施行的剧本。
2. check-versions.js是检查npm战node的版本的剧本文件。
3. utils.js是用于一些东西办法（天生途径的所在），次要用于天生cssLoader战styleLoader设置的剧本。
4. vue-loader.conf.js是vue-loader的一些根本设置，内里用到utils.js的一些办法。
5. weback.base.conf.js是dev战prod情况下的根本设置。
6. weboack.dev.conf.js是dev情况的设置。
7. weboack.prod.conf.js是prod情况的设置。

再开去看下config文件夹的文件，看上面：
1. dev.env.js是dev情况变量设置。
2. index.js是dev战prod情况的一些根本属性设置（我们能够按照本人的需求去变动那些设置）。
3. prod.env.js 是prod情况变量设置。
我们上面去一个一个去具体讲解那些文件,先去看check-versions.js,次要是检查npm战node的版本的！

再去看下config下的index.js,次要是dev战prod情况的一些根本属性设置（我们能够按照本人的需求去变动那些设置），webpack.dev.conf.js战webpack.prod.conf.js城市用到那个文件的一些根本属性设置！

prod.env.js是prod情况变量设置，便是一个工具，webpack.prod.conf.js也会用到那个文件的变量！

dev.env.js是dev情况变量设置，实在也是一个工具，只不外prod情况是"production"，dev情况是"development"，webpack.dev.conf.js会用到那个文件的变量！

webpack.base.conf.js是prod战dev的公用设置！终极天生完好的设置皆要减上它！

webpack.base.conf.js用到utils.js战vue-loader.conf.js，而且vue-loader.conf.js也用到utils.js的办法，先去看下utils.js，它有天生途径的办法战用于天生cssLoader战styleLoader设置的办法！

vue-loader.conf.js是vue-loader的一些根本设置！

webpack.dev.conf.js是dev情况的设置！

webpack.prod.conf是prod情况的设置！

最初一个是build.js文件，那个是建构开辟情况的文件！

终究收拾整顿完了！我们下篇来讲下vue百口桶的vue-router!假如以为写的能够，面个存眷！感谢!

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！