README_CN.md

webpack5-boilerplate

基于webpack5搭建的脚手架/webpack5-boilerplate

Features

• 基于webpack5搭建的脚手架
• 最少的依赖安装
• 支持ES6语法编译
• 兼容ie10及以上版本
• 编译Less
• 支持第三方代码分割
• 支持自己的模块代码分割
• 支持多页面打包

File Structure

webpack5-boilerplate
├── README.md
├── README_CN.md
├── babel.config.json
├── package.json
├── public
│   └── lMC.ico
├── src
│   ├── assets
│   │   ├── font
│   │   ├── img
│   │   ├── media
│   │   ├── plugins
│   │   └── styles
│   ├── entry
│   │   ├── index.js
│   │   └── share.js
│   └── pages
│       ├── index.html
│       └── share.html
└── webpack
    ├── config.js
    ├── webpack.common.js
    ├── webpack.dev.js
    └── webpack.prod.js

• package.json：相关依赖
• public： 不会被webpack编译的文件，打包后会直接输出到打包的根目录下
• src：开发过程中的代码，会被webpack编译
  • src/assets/plugins：用来存放自己写的js（用与分割自己插件代码的目录）
• entry: 入口文件
• pages：要被编译的html模板
• webpack：关于webpack的相关配置
• config.js：自己可以DIY的一些配置项
• webpack.common.js：webpack开发跟生产配置中的共用配置
• webpack.dev.js：development模式的配置（本地开发）
• webpack.prod.js：production模式的配置（生产上线）

Usage

• 安装依赖
  npm i
• 开启开发模式
  npm start
• 打包
  npm run build

Split your own code

• 如果要分割自己的代码模块，在webpack.common.js里面开启以下代码就可以了

  myplugin: {
      name: 'myplugin',
      test(module) {
          return(
              module.resource &&
              module.resource.includes(`${path.sep}plugins${path.sep}myplugin`)
          );
      },
      minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb
      priority: 10,  // 优先级要大于 vendors 不然会被打包进 vendors
      chunks: 'initial' // 将什么类型的代码块用于分割，三选一： "initial"：入口代码块 | "all"：全部 | "async"：按需加载的代码块
  },

• 说明：

  • ${path.sep}plugins${path.sep}myplugin 可以理解为${path.sep}你的插件存放目录${path.sep}你的插件名字
  • name 表示把自己的代码分割出来，并且重命名为[name]
  • plugins 指的是src/assets/plugins
  • myplugin 指的是，要分割的自己的js代码名字，一定要跟自己取的名字相匹配，这样才能匹配分割到。

• 例如：
  我现在要分割src/assets/other/otherplugin.js这个文件，所以插件存放目录为other，插件名字为otherplugin。根据${path.sep}你的插件存放目录${path.sep}你的插件名字，那配置就是：${path.sep}other${path.sep}otherplugin

Instruction

• 本地开发过程中，开启了webpack-dev-server，保存在内存中的打包文件目录结构：

  (http://localhost:8080/)
  ├── js
  ├── img
  ├── font
  ├── media
  ├── favicon.ico
  ├── index.html
  └── share.html
  

  dev模式下css直接渲染到内联<style></style>，没有分离出来，为了加快开发预览速度；
  js是做了代码分割的，因为webpack里面，个人觉得代码分割模块比较复杂，所以开发环境生产环境都进行了分割，这样有问题可以提前在开发环境发现，如果不想在开发环境下代码分割，把webpack.common.js里面的optimization移到webpack.prod.js就好了

• 打包以后的目录结构：

  dist
  ├── css
  ├── js
  ├── img
  ├── font
  ├── media
  ├── favicon.ico
  ├── index.html
  └── share.html
  

  会把css，js，img，media分离

Attention

• config.js里面的proPublicPath字段，可用于打包后，html访问静态资源的绝对路径。例如静态资源部署了cdn，那就可以把值设置为cdn路径
• config.js里面的staticFileName字段，表示不经过webpack打包的静态资源目录，生产打包后会直接拷贝到打包文件夹根目录下
• config.js里面的proResFileName字段，表示将js、css、media、img等静态资源放入proResFileName文件夹，dist包根目录只留html文件或其他文件，方便部署。例如proResFileName的值为assets时，则打包后的结构为：

  dist
  ├── assets
  │   ├── css
  │   ├── font
  │   ├── img
  │   ├── js
  │   └── media
  ├── favicon.ico
  ├── index.html
  └── share.html
  

• public文件夹里面的文件命名，避免跟src下的文件名相同，否则打包后会覆盖掉src下的打包出来的文件

Other

经过测试发现，@babel/plugin-transform-modules-commonjs这个插件会影响webpack tree shaking的功能，所以这个插件还是要慎重安装

End

• 每次修改完webpack文件夹里面的文件，记得npm start重新开一下服务
• 对于这个脚手架的更多的分析，可以看看我这个文章关于Webpack5搭建的一些体会
• 欢迎大家Fork学习交流
• 脚手架里面都写了注释了，如果觉得好用，欢迎大家Star