webpack 配置

Webpack 配置详解

在项目初期，首先要生成 package.json 文件，作为项目描述，通过命令行初始化项目来创建：`npm init`。

开发和生产环境是前端项目常见的构建环境，webpack 提供 mode 属性来区分。通过 process.env 控制环境变量，如使用 cross-env 插件方便设置启动命令。

配置文件根据环境不同，分为 webpack.base.config.js（公共配置）和 webpack.dev.config.js、webpack.prod.config.js（环境特定配置），通过 webpack-merge 合并。

入口和出口配置是webpack的基本组成部分，分别通过 entry 和 output 属性指定处理的起点和结果文件位置。

loader 和 plugin 分别用于处理不同类型文件和额外功能，如处理HTML、CSS和SASS等，需要下载相应的插件。

HTML配置涉及插件的安装和配置，SASS配置包括下载依赖和配置loader处理.scss文件。

遇到下载问题时，可能需要重新管理node-sass依赖，并使用copy-webpack-plugin复制不需要处理的静态文件。

source map配置在开发环境中开启，有助于定位源代码错误；服务器代理用于开发环境调试接口；忽略文件配置则避免webpack无谓地处理某些目录。

为了提升性能，可以使用HappyPack进行多进程打包，ParallelUglifyPlugin则用于多进程压缩JS。