vue.js仿餓了麼app---webpack配置項

webpack配置項

上一節咱們已經看了整個目錄結構，在package.json中script有兩個配置項，dev和build分別是執行build/dev-server.js,和node build/build.js

"scripts": {
      "dev": "node build/dev-server.js",
      "build": "node build/build.js"
    }

config目錄

咱們webpack的配置項分別在兩個目錄裏面，build和config，咱們先看config，config裏面的index.js導出了兩個配置對象，build和dev。

var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css']
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }
}

dev.env.js導出了一個開發時的環境變量

NODE_ENV: '"development"'

prod.en.js導出了一個生產時的環境變量

NODE_ENV: '"production"'

config都是一些webpack配置時須要用到的變量。

build目錄

build目錄就是webpack的具體配置了，build.js和dev-server是入口配置。

1.check-versions.js是檢測檢查node和npm是否符合package.json裏面的engines，若是不符合，會輸出錯誤信息

2.dev-client.js是刷新當前頁面

3.utils.js是工具包，導出了 assetsPath cssLoaders styleLoaders 三個方法，assetsPath是根據開發環境的全局變量獲取目錄路徑，cssLoaders 返回一組cssloader

4.dev-server.js

引入了check-versions.js,而且自動執行，檢測node和npm版本號。

引入了webpack.dev.conf，在webpack.dev.conf中又引入了webpack.base.conf.js,使用webpack-merge合併了這兩個文件的配置項而且導出。

使用opn，監聽配置項裏面的端口號，新頁面打開http://localhost:8080/

5.build.js

引入了check-versions.js,而且自動執行，檢測node和npm版本號。

將環境變量變成js env.NODE_ENV = 'production'

會引入webpack.prod.conf.js而且自動執行