webpack4.x 1:1 还原 vue-cli创建的项目！！！

最新推荐文章于 2025-02-25 22:18:23 发布

原创最新推荐文章于 2025-02-25 22:18:23 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack入门 #webpack从0到1 #webpack配置vue项目 #webpack vue

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文档详细介绍了如何使用Webpack从头配置一个Vue项目，包括模块热替换、多进程JS压缩、样式独立文件、Babel全IE9兼容、CDN外部加载、Treeshaking以及ant-design-vue按需加载等关键配置。通过这些配置，可以提升项目性能并优化开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目目录

先看一下目录，是不是似曾相识？

├── dist
├── public
│   └── index.html
├── src
│   ├── assets
│   │   ├── css
│   │   └── img
│   ├── components
│   ├── plugins
│   │   ├── antdv.js
│   │   └── Dot.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   ├── utils
│   │   ├── index.js
│   │   ├── RegExp.js
│   │   └── request.js
│   ├── views
│   │   ├── Home.vue
│   │   └── Login.vue
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── babel.config.js
├── package-lock.json
├── package.json
├── webpack.config.js
└── yarn.lock

前言

众所周知，vue-cli 实际上就是基于 webpack 封装的一个工具，它默认保留了一些常用的配置，我们甚至不需要对于 webpack 有多深的了解都能很好的开发vue项目。但是使用 webpack 从0配置一个 vue项目还是一件很有意思的事。
首先声明本篇不会教你写 webpack 的 hello world，官方文档就是最好的入门教程。我也是在看完官方文档后在网上没有找到一篇自己想要的配置，只好自己写一篇，希望能给到看标题进来的人一些帮助。

它具有哪些功能

介绍一些本篇配置具有的功能和一些概念，有助于对于webpack有一个整体性的认知。

模块热替换（类似于热更新、热部署，它可以无刷新更新页面👍）
多进程并行压缩js（显著提高打包的速度、显著减小文件大小👍）
提取样式为 .css 文件（默认方式为将 style字符串插入到页面中，提取为单文件可以显著节省加载时间👍）
配置 babel，全兼容 IE9及以上（需求再无理也能克服👍后面会放一个网址作为预览，部分样式就没考虑IE9了😅）
配置部分js使用 cdn 外部加载（显著提高首屏加载速度、显著减少打包文件大小👍）
tree shaking （筛除没有用到的 ES模块，显著减少打包文件大小👍）
整合 ant-design-vue 按需加载、主题色配置（显著减少打包文件大小👍）

以上几乎是重要功能的全部了，下面直接贴配置。

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 使用解构引入，webpack 中文文档教程该块代码已过时
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const Webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 多进程并行压缩js插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

const WebpackConfig = {
  // 入口js
  entry: {
    app: './src/main.js',
  },
  output: {
    // 输出路径 - 不存在即创建文件夹
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名称
    filename: '[name].js',
    // 打包后资源的地址前缀 - 目前只有在 webpack-dev-middleware 中使用
    publicPath: './'
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        // 提取 css 为 .css文件 引入
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  'primary-color': '#1DA57A',
                  'link-color': '#1DA57A',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true
              }
            },
          }
        ],
      },
      {
        // 加载图片
        test: /\.(png|jpg)$/, use: ['file-loader']
      },
      {
        // 加载字体
        test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']
      },
      {
        // 加载vue文件
        test: /\.vue$/, use: ['vue-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  },
  plugins: [
    // 优化 moment.js
    new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // 压缩js插件
    new ParallelUglifyPlugin({
      uglifyJS: {},
      test: /.js$/g,
      include: [],
      exclude: [],
      cacheDir: '',
      workerCount: '',
      sourceMap: false
    }),
    new VueLoaderPlugin(),
    // 更改您的配置文件以告诉 CleanWebpackPlugin 我们不想在监视触发增量构建后删除 index.html 文件，我们可以使用 cleanStaleWebpackAssets 选项来执行此操作：
    new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
    // 提取 css
    new MiniCssExtractPlugin(),
    // 生成 html 文件，并将生成的所有 bundle文件 自动引入到 html中
    new HtmlWebpackPlugin({
      // 初始模板
      template: './public/index.html',
      // cdn不是HtmlWebpackPlugin默认配置， 但可在index.html中 以 'htmlWebpackPlugin.options.cdn.js' 读取数据
      cdn: {
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
          'https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
          'https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js'
        ]
      }
    }),
    // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。
    new Webpack.NamedModulesPlugin(),
    // 模块热替换插件
    new Webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // 用于开发环境的错误调试定位
  devtool: '(none)',
  devServer: {
    // 告诉服务器从哪里提供内容
    contentBase: './public',
    // 在浏览器中打开
    open: true,
    // 端口号
    port: 8080,
    // 启用 webpack 的模块热替换（ps：不刷新页面更新代码）
    hot: true,
    // 假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。
    publicPath: '/'
  },
  // 以下js使用cdn外部引入
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex'
  }
}

又贴了这么长的代码😓，以上便是我尝试使用 webpack 1:1 还原 vue-cli 项目的全部了，当然 1:1 是有些吹了😋。我建议初学webpack的同学将官方例子全部敲一遍，相信我官方例子绝对通俗易学。耐心啃完官方教程然后再来配置一个vue项目应该就非常得心应手了，本篇是一篇 使用webpack起手配置vue项目 博文。或许在自己的实践中，有人会遇到不同的坑，填坑之路绝对是充满乐趣的。学会一个东西都是从踩坑到熟练的过程，加油💪。