搭建完成后的工程目录

image.png
这个目录结构是不是跟vue的工程目录很像，但是使用vue-cli3的版本将webpack的配置文件隐藏啦
我找到的webpack的配置文件在：**node_modules/@vue/cli-service/lib/config/base.js**

webpack配置解析

基础配置:webpack.config.js

  1. const path = require("path");
  2. const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除 dist 目录
  3. const CopyPlugin = require("copy-webpack-plugin"); // 处理静态资源
  4. const HtmlWebpackPlugin = require("html-webpack-plugin"); // 处理模板页面
  5. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 打包css文件
  6. const VueLoaderPlugin = require("vue-loader/lib/plugin");
  7. // webpack的基本配置
  8. module.exports = {
  9.   entry: "./src/main.js", // 获取入口配置
  10.   output: {
  11.     filename: "js/[name].[chunkhash:5].js", // js 输出到 dist/js/xxx
  12.     publicPath: "/", // 公用的公共路径 /
  13.     path: path.resolve(__dirname, "dist"), // 输出目录为 dist
  14.   },
  15.   resolve: {
  16.     extensions: [".js", ".vue", ".json"],
  17.     alias: {
  18.       "@": path.resolve(__dirname, "src"), // 别名 @ = src目录
  19.       _: __dirname, // 别名 _ = 工程根目录
  20.     },
  21.   },
  22.   stats: {
  23.     colors: true, // 打包时使用不同的颜色区分信息
  24.     modules: false, // 打包时不显示具体模块信息
  25.     entrypoints: false, // 打包时不显示入口模块信息
  26.     children: false, // 打包时不显示子模块信息
  27.   },
  28.   module: {
  29.     rules: [
  30.       {
  31.         // 各种图片、字体文件，均交给 url-loader 处理
  32.         test: /\.(png)|(gif)|(jpg)|(svg)|(bmp)|(eot)|(woff)|(ttf)$/i,
  33.         use: [
  34.           {
  35.             loader: "url-loader",
  36.             options: {
  37.               limit: 1024,
  38.               name: "static/[name].[hash:5].[ext]",
  39.               esModule: false,
  40.             },
  41.           },
  42.         ],
  43.       },
  44.       {
  45.         test: /\.vue$/,
  46.         use: "vue-loader",
  47.       },
  48.       {
  49.         test: /\.css$/i,
  50.         use: [MiniCssExtractPlugin.loader, "css-loader"],
  51.       },
  52.       { test: /\.js$/, use: "babel-loader" },
  53.     ],
  54.   },
  55.   plugins: [
  56.     new CleanWebpackPlugin(), // 应用 清除输出目录 插件
  57.     new CopyPlugin({
  58.       // 应用 复制文件 插件
  59.       patterns: [
  60.         {
  61.           from: path.resolve(__dirname, "public"), // 将public目录中的所有文件
  62.           to: "./", // 复制到 输出目录 的根目录
  63.         },
  64.       ],
  65.     }),
  66.     new HtmlWebpackPlugin({
  67.       template: "./public/index.html",
  68.       filename: "index.html",
  69.     }),
  70.     new MiniCssExtractPlugin({
  71.       // 打包 css 代码 到文件中
  72.       filename: "css/[name].css",
  73.       chunkFilename: "css/common.[hash:5].css", // 针对公共样式的文件名
  74.     }),
  75.     new VueLoaderPlugin(),
  76.   ],
  77. };

开发环境配置：webpack.dev.js

  1. const merge = require("webpack-merge");
  2. const baseConfig = require("./webpack.config.js");
  4. // webpack的开发环境配置，从基本配置中合并
  5. // 合并是利用 webpack-merge 完成的： https://github.com/survivejs/webpack-merge
  6. const devConfig = {
  7.   mode: "development",
  8.   devtool: "source-map",
  9.   devServer: {
  10.     open: true,
  11.     port: 8080,
  12.     proxy: {
  13.       // 如果开发环境中有跨域问题，在这里配置代理
  14.     },
  15.     stats: "minimal",
  16.   },
  17. };
  18. module.exports = merge(baseConfig, devConfig);

生产环境配置：webpack.prod.js

  1. const merge = require("webpack-merge");
  2. const baseConfig = require("./webpack.config.js");
  4. const prodConfig = {
  5.   mode: "production",
  6.   devtool: "none",
  7.   optimization: {
  8.     splitChunks: {
  9.       //分包配置
  10.       chunks: "all",
  11.       cacheGroups: {
  12.         styles: {
  13.           minSize: 0,
  14.           test: /\.css$/,
  15.           minChunks: 2,
  16.         },
  17.       },
  18.     },
  19.   },
  20. };
  21. module.exports = merge(baseConfig, prodConfig);

package.json 信息展示

  1. {
  2.   "name": "vue-webpack",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "serve": "webpack-dev-server --config webpack.dev.js",
  8.     "build": "webpack --config webpack.prod.js"
  9.   },
  10.   "repository": {
  11.     "type": "git",
  12.     "url": "git+https://github.com/yjisme/vue-webpack.git"
  13.   },
  14.   "keywords": [],
  15.   "author": "",
  16.   "license": "ISC",
  17.   "bugs": {
  18.     "url": "https://github.com/yjisme/vue-webpack/issues"
  19.   },
  20.   "homepage": "https://github.com/yjisme/vue-webpack#readme",
  21.   "devDependencies": {
  22.     "@babel/core": "^7.10.2",
  23.     "babel-loader": "^8.1.0",
  24.     "babel-preset-vue": "^2.0.2",
  25.     "clean-webpack-plugin": "^3.0.0",
  26.     "copy-webpack-plugin": "^6.0.2",
  27.     "css-loader": "^3.5.3",
  28.     "file-loader": "^6.0.0",
  29.     "html-webpack-plugin": "^4.3.0",
  30.     "mini-css-extract-plugin": "^0.9.0",
  31.     "url-loader": "^4.1.0",
  32.     "vue-loader": "^15.9.2",
  33.     "vue-template-compiler": "^2.6.11",
  34.     "webpack": "^4.43.0",
  35.     "webpack-cli": "^3.3.11",
  36.     "webpack-dev-server": "^3.11.0",
  37.     "webpack-merge": "^4.2.2"
  38.   },
  39.   "dependencies": {
  40.     "vue": "^2.6.11",
  41.     "vue-router": "^3.3.2",
  42.     "vuex": "^3.4.0"
  43.   }
  44. }

项目源码

源码

阿里云盘前端/vue/webpack搭建vue单页应用

地址

https://github.com/yjisme/vue-webpack
备用地址：https://github.com/youkeOO1/vue-webpack