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并且自动执行