webpack手动配置笔记

前言：

很多时候，到了项目的中后期，随着业务的增加，我们对于构建和系统性能，都会出现一些痛点，所以了解webpack的组成部分，以及细枝末叶很是重要，这为后期的优化和重构等有很好的益处，下面以vue的脚手架项目开始

脚手架

通过 @vue/cli 搭建交互式的项目脚手架。 webpack创建项目

vue init webpack my-vue

根据需要安装，建议都进行安装

当看到这个，表示安装成功

按提示运行项目

npm run dev

当看到这个表明，启动成功

浏览器，输入http://localhost:8080/

项目有了，下面进入今天讨论的主题

webpack配置

定位到config下的index.js，这个文件就是今天的主角

看下里面都有哪些东西

里面主要分，开发（dev）和构建（build）两部分

开发（dev）与构建（build）

'use strict'

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static', // 文件存放的位置
    assetsPublicPath: '/', // 资源根目录
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // 本地host
    port: 8080, // 端口
    autoOpenBrowser: false, // 是否自动打开浏览器，默认不自动打开
    errorOverlay: true, // 错误覆盖
    notifyOnErrors: true, // 错误通知
    poll: false, // 没什么用

    // 控制台显示错误和警告 监测es语法
    useEslint: true,
    // 如果为true es检查和警告将被覆盖，所以这边最好为false
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    cacheBusting: true,
    // 压缩css
    cssSourceMap: true
  },

  build: {
    // 构建生成的文件
    index: path.resolve(__dirname, '../dist/index.html'),

    // 构建路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static', // 生成的目标子文件
    assetsPublicPath: '/', // 项目的根目录

    productionSourceMap: true, // 生产环境压缩
    devtool: '#source-map', // 打包压缩工具

    // 如果为true要安装webpack插件
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false, // 生产Gzip文件压缩，一般默认为false
    productionGzipExtensions: ['js', 'css'], // 生产Gzip压缩扩展，对js，css压缩

    // `npm run build --report`
    bundleAnalyzerReport: process.env.npm_config_report // 运行构建包可视化分析图
  }
}

总结

webpack是为了更好的打包浏览器能够识别的语言，针对性能的优化还需要细看相关的参数，根据业务场景进行权衡