标签归档:WebPack

手动配置webpack 4.x,定义属于自己的脚手架

概述

webpack作为一个构建工具是非常优秀的,提供了多页面、Plugin、Loader等功能,而且还有基于webpack的零配置工具(如create-react-app)等。在webpack应用如此广泛的情况下,我觉得有必要深入了解webpack并从零开始配置,因为至少出了问题能很快的找到异常配置并快速修改好。之前搭建webpack也好多次了,但是没有进行总结。这次决定从头开始搭建,然后边操作边记录

之前还用过Parcel等新秀解决方案,它讲究的是零配置,用过在一些小项目上,但貌似还不太稳定,经常会出编译错误,所以又跑回了webpack的怀抱^_^

测试环境

Node.js: 8.14.0

Npm: 6.4.1

已搭建好环境的仓库

为了方便随时Clone出webpack编译环境,我把最终环境部署在Github仓库上了,
地址是:https://github.com/tun100/webpack-basic-frame

依赖初始化

npm init -y

然后将下面的依赖信息添加到package.json(因为不同依赖版本的差异,容易导致bug,如果使用我的这个依赖,我确信肯定能构建环境成功^_^),在添加成功之后执行npm i -S && npm i -D

   "scripts": {
     "dev": "npx webpack-dev-server --config ./webpack.dev.config.js --progress --profile --colors --watch --mode development",
     "dist": "npx webpack --config