浅谈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搭建SPA应用开发环境
- Webpack模块化管理CSS和图片等资源
有了前文的铺垫，本文就不打算展开介绍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_
})
}
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前文章：浅谈Webpack自动化构建实践指南-创新互联
本文地址：http://6mz.cn/article/dpjppi.html