手动搭建 webpack 实现常用脚手架

webpack 是什么？

webpack 是一个模块打包器，简单来讲，webpack 可以将我们项目中的依赖打包。

常用配置

  • 开发环境 mode
    • development 开发环境 （文件较大）
    • production 生产环境 (文件较小)
    • none
  • 入口 entry
    • 单入口 string
    • 多入口 array
    • 多入口 object
  • 出口 output
    • filename
    • publicPath
  • 解析规则 modules.rules
    • test
    • loader 字符串形式
    • use 对象形式
  • web 服务器 devserver
    • host 域名
    • port 端口
    • hot 热更新
    • liveReload 热替换
    • compress 开启服务端 gzip 压缩
    • historyApiFallback html5-history 路由模式，避免页面 404
  • 别名 resolve.alias
  • 扩展名 resolve.extensions
  • 资源地图 devtool
    • cheap-source-map （开发）
    • eval-cheap-source-map （生产）
  • 插件 plugins
    • 抽离 css （mini-css-extract-plugin）
    • 解析 html （html-webpack-plugin）
    • 编译进度条 （webpackbar）
    • 合并 webpack （webpack-merge）
    • 友好提示 （FriendlyErrorsWebpackPlugin） webpack5.x 不支持

解析 vue 单文件

  • vue-loader 解析.vue 文件
  • vue-template-compiler 解析 vue 中的 template 模板
  • vue-style-loader 解析 vue 中的 styley

webpack@4.x版本以上:

1
2
3
4
5
6
7
8
9
10
11
12
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

解析 jsx 单文件