浅谈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://azwzsj.com/article/dpjppi.html

浅谈Webpack自动化构建实践指南-创新互联

其他资讯