浅谈Webpack自动化构建实践指南
由于现在的博客是使用wordpress搭建，自己得经常修改过一些代码，但是修改第三方源码真的比较痛苦，于是决定计划开始使用React + Node.js / Python开发新博客项目，最终替换当前博客代码，方便以后博客的维护和更新，也能实现自我开发技术，架构设计，解决问题能力的提升，同时记录下整个开发历程，总结，分享，希望能与读者们一起进步。本篇介绍如何使用Webpack和Babel，Eslint，documentation.js等搭建项目开发环境和生产环境，也算项目的准备工作，下一期计划介绍项目的架构设计和技术栈选择。
npm VS Yarn
在本项目我们使用Yarn管理项目三方依赖，不过放心，Yarn和NPM不冲突，也不是要替代NPM，使用方式基本一致，只需要简单了解以下几点。
三方库版本管理
npm 和 Yarn 都使用 package.json 来跟踪项目的依赖，版本号并非一直准确，因为你可以定义版本号范围，npm的不同更新范围，可能导致在拥有相同 package.json 文件的机器上安装不同版本包，这可能导致一些差异的异常和冲突。
那npm有解决方式嘛？npm中可以使用 npm shrinkwrap生成一个版本锁文件npm-shrinkwrap.json，在 npm install 时会在读取 package.json 前先读取这个文件，但是当更新包版本时，版本锁文件并不会自动更新，我们得手动再次执行npm shrinkwrap命令更新它。
那么Yarn有什么优势呢？每次添加或更新安装库包时，Yarn 都会创建（或更新）yarn.lock 文件，这样可以确保所有机器安装相同版本包，同时支持 package.json 中定义的允许版本范围，和npm的区别在于Yarn总会自动更新 yarn.lock，而npm需要手动更新。
并发安装
npm通常是按顺序一个一个安装依赖，而Yarn支持并行加载安装多个三方库包，所有其速度和效率都更快。
离线缓存
使用Yarn管理包时，三方库包存放在本地磁盘，下次安装将直接使用本地文件而不是再次下载，这也从另一方面使其安装速度优于npm。
简而言之就是，Yarn和npm使用方式几乎一样，但是其版本管理更方便，安装速度更快，更有优势，但是实际上它的所有三方库包加载地址和npm都是统一的。
Webpack
我们使用Webpack打包工具作为项目的自动化构建工具，将JavaScript，CSS，图片等资源都当作JavaScript模块（使用Webpack loader处理转换）进行统一管理，关于Webpack博主之前总结过两篇文章，可以参考：
有了前文的铺垫，本文就不打算展开介绍Webpack的工作原理和具体配置，而计划从项目实践开发和测试，打包层面思考如何更好的组织Webpack，如何使用Webpack提告项目开发，打包效率。
Webpack配置文件
首先我们在根目录下创建webpack.config.js配置文件：
module.exports = function () {
let env
let _DEV_ = true // 开发环境
let _PROD_ = false // 生产环境
switch (process.env.NODE_ENV) {
case 'dev':
env = 'dev'
_DEV_ = true
_PROD_ = false
break
case 'production':
env = 'prod'
_DEV_ = false
_PROD_ = true
break
default:
env = 'dev'
_DEV_ = true
_PROD_ = false
}
// 根据环境参数动态决定引入对应配置文件
return require(`./webpack/${env}.conf.js`)({
ROOTPATH: __dirname,
_DEV_,
_PROD_
})
}
根据process.env.NODE_ENV环境参数动态决定加载对应配置文件：
- dev：加载webpack/env.conf.js配置文件；
- prod：加载webpack/prod.conf.js配置文件；
我们在项目根目录下创建了webpack目录，其内创建了三个配置文件：
- base.conf.js：基础配置文件，在开发，生产环境都需要的配置；
- dev.conf.js：开发环境配置文件；
- prod.conf.js：生产环境打包配置文件；
开发环境配置
开发环境配置文件中定义了一些开发使用的构建配置，然后引入基础配置文件，使用webpack-merge三方库，将开发环境配置合并至基础配置对象，然后返回开发环境打包构建配置对象，作为Webpack打包构建的参数：
const webpackMerge = require('webpack-merge')
const PUBLICPATH = '/assets/'
const PORT = '9090'
let options = { /* ... */ }
module.exports = function (args) {
options.ROOTPATH = args.ROOTPATH
options.env = args.env
return webpackMerge(require('./base.conf')(options), {
devtool: 'source-map',
devServer: {
contentBase: path.join(args.ROOTPATH, './src'),
historyApiFallback: true,
inline: true,
hot: true,
port: PORT,
proxy: {
'*': `http://localhost:${PORT}/${PUBLICPATH}/`
}
},
plugins: []
})
}
生产环境配置
生产环境配置文件中定义了的是生产环境使用的构建配置，然后也是引入基础配置文件，使用webpack-merge三方库，将生产环境配置合并至基础配置，然后返回配置对象，作为Webpack打包构建的参数：
let options = { /* ... *