上一节咱们已经看了整个目录结构,在package.json中script有两个配置项,dev和build分别是执行build/dev-server.js
,和node build/build.js
css
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }
咱们webpack的配置项分别在两个目录里面,build和config,咱们先看config,config里面的index.js导出了两个配置对象,build和dev。html
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
NODE_ENV: '"development"'
prod.en.js导出了一个生产时的环境变量webpack
NODE_ENV: '"production"'
config都是一些webpack配置时须要用到的变量。web
build目录就是webpack的具体配置了,build.js和dev-server是入口配置。npm
1.check-versions.js是检测检查node和npm是否符合package.json里面的engines,若是不符合,会输出错误信息json
2.dev-client.js是刷新当前页面工具
3.utils.js是工具包,导出了 assetsPath
cssLoaders
styleLoaders
三个方法,assetsPath
是根据开发环境的全局变量获取目录路径,cssLoaders
返回一组cssloader ui
4.dev-server.jsspa
引入了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而且自动执行