Webpack5零配置解决方案webpack5现在开箱即用能力相对之前增强了很多，但是依然不是理想（相对于parcel）

简介

webpack5现在开箱即用能力相对之前增强了很多，但是依然不是理想（相对于parcel），但是parcel却缺少像webpack这样的高度配置灵活性，权衡之下我决定对webpack的配置文件作为入手点，让配置文件更加智能的生成便是本次简化webpack的核心思想

废话少说，我们有请今天的主角 @systemlight/webpack-config

包管理器可以使用npm、yarn、pnpm（推荐）
下面我们就来创建一个项目，看看 @systemlight/webpack-config 提供哪些配置上的支持
github

初始化项目

mkdir app
cd app
npm init -y

安装webpack必要模块

webpack: 打包工具
webpack-cli: 打包工具命令后封装
webpack-dev-server: 开发服务器
@systemlight/webpack-config: 通用的智能配置生成工具包

npm i webpack webpack-cli webpack-dev-server @systemlight/webpack-config -D

创建一个入口文件

创建 src/main.js 文件

// 创建一个div加入到body中
let div = document.createElement('div')
div.style.cssText = 'width:100px;height:100px;background:red;'
div.innerText = 'Hello Webpack'
document.body.append(div)

创建webpack配置文件

创建 webpack.config.js 文件

const {wcf} = require('@systemlight/webpack-config')

module.exports = wcf({})

修改package.json文件的scripts

...
"scripts": {
  "serve": "webpack serve --mode development",
  "build": "webpack --mode production"
}
...

启动开发服务器查看效果

// 打开http://localhost:8080/查看效果，发现页面中正常显示红色方块即为正常
npm run serve

我们没有做任何复杂的webpack.config.js配置即可正常打包文件，src/main.js作为默认入口，我们接下来试试如何加入css或者scss等预处理样式文件

使用scss

// 安装loader模块
npm i sass sass-loader css-loader style-loader -D

创建 src/style.scss 文件

.rect {
  width: 100px;
  height: 100px;
  background: blue;
}

修改 src/main.js 文件

import './style.scss'

let div = document.createElement('div')
div.className = 'rect'
div.innerText = 'Hello Webpack'
document.body.append(div)

重新运行一下，我们会发现方块颜色已经变成css样式的蓝色

配置Vue3

// 安装必要模块
npm i vue-loader -D
npm i vue

创建 html模板文件 `src/index.ejs`

该文件作为打包输出的index.html的模板文件，我们在模板中增加一个id=root的元素用于vue挂载

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x5-fullscreen" content="false">
    <meta name="full-screen" content="no">
    <meta name="apple-mobile-web-app-capable" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" type="image/x-icon" href="/favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>

创建 `src/App.vue`

<template>
  <div class="rect">Hello webpack</div>
</template>

修改 `src/main.js`

import './style.scss'

import {createApp} from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#root')

重新运行服务器，我们发现我们没有任何webpack的配置即可正常做到打包编译，不仅如此，@systemlight/webpack-config提供了react，typescript，分包优化等等的功能，默认不用配置任何内容，但是@systemlight/webpack-config也提供了粒度化的配置项，同时如同@vue/cli配置文件一般提供了 configureWebpack 和 chainWebpack 两个配置项可以直接修改webpack默认配置，这些配置项可以查看github

结语

虽然@systemlight/webpack-config屏蔽了配置webpack复杂度，但是包括代码规范（lint），typescript（强类型），babel（兼容处理），postcss（后置处理样式）等仍然需要很多额外配置文件，这些不是@systemlight/webpack-config功能范畴的，但是却提供了适用于不同项目且基于@systemlight/webpack-config的模板可以参考github的各个分支模板，总而言之，不同项目配置的功能不甚相同，但是直接使用webpack的好处在于更加灵活，相对于@vue/cli，create-react-app这样的脚手架想要个性化定制的困难度是有所缓解的。

Webpack5零配置解决方案

简介