前言:
很多时候,到了项目的中后期,随着业务的增加,我们对于构建和系统性能,都会出现一些痛点,所以了解webpack的组成部分,以及细枝末叶很是重要,这为后期的优化和重构等有很好的益处,下面以vue的脚手架项目开始
脚手架
通过 @vue/cli 搭建交互式的项目脚手架。 webpack创建项目
vue init webpack my-vue
复制代码
根据需要安装,建议都进行安装
npm run dev
复制代码
当看到这个表明,启动成功
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是为了更好的打包浏览器能够识别的语言,针对性能的优化还需要细看相关的参数,根据业务场景进行权衡