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

项目目录

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

├── 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项目 博文。或许在自己的实践中，有人会遇到不同的坑，填坑之路绝对是充满乐趣的。学会一个东西都是从踩坑到熟练的过程，加油💪。

源码

可在 该地址 直接拉取源码，以供参考。