vue-cli框架中webpack配置方法的详细说明

什么是网络包

Webpack是一个模块打包工具。所谓模块，就是在通常的前端开发中，会用到一些静态资源，比如JavaScript、CSS、图片等文件，而webpack会调用这些静态资源文件模块

Webpack支持AMD和CommonJS，以及其他一些模块系统，兼容各种JS编写规范，能够处理模块之间的关系，因此具有更强大的JS模块化功能，可以统一管理和封装静态资源。此图在官网介绍：

因为可以编译打包CSS，做CSS预处理，编译JS方言，打包图片，压缩代码等等，所以在很多地方都可以代替Grunt和glaugh。所以在我接触到webpack之后，我就不太想用大口了

为什么使用网络包

总结如下：

兼容CommonJS、AMD、ES6的语法；支持js、css、图片等资源文件的打包；串行模块加载器和插件机制使其具有更好的灵活性和可扩展性，如提供对CoffeeScript和ES6的支持；有一个独立的配置文件webpack配置；js；代码可以切割成不同的块，可以按需加载，减少初始化时间；支持SourceUrls和SourceMaps，易于调试；它有强大的Plugin接口，多为内部插件，使用灵活；webpack使用异步IO，并具有多级缓存。这使得webpack速度更快，并加快了增量编译。网络包主要用于vue和React。事实上，它与Browserify非常相似，但它将应用程序打包到多个文件中。如果单个页面应用程序有多个页面，用户只能从下载相应页面的代码。当他们访问另一个页面时，他们不需要再次下载公共代码。

基于我的项目使用

vue webpack配置文件的基本目录结构如下：

Config dev.env.js //dev环境变量配置index.js//dev和prod环境的一些基本配置 prod.env.js //prod环境变量配置构建npm执行的build.js//脚本运行构建check-versions . js////检查NPM和node的版本logo.pngutils.js//some工具和方法。主要用于生成cssLoader和styleLoader配置vue-loader.conf.js//vueloader的配置信息webpack.base.conf.js//dev和prod 的公共配置webpack.dev.conf.js//dev环境的配置

dev . env . j

config中的文件实际上是为构建服务的，它们中的大多数定义了一个变量并将其导出

使用严格//[采用严格模式]/*** [webpack-merge提供了合并功能。它从数组和合并对象中创建新对象]*/const merge=require(' web pack-merge ')const prodenv=require('。/prod . env’)module . exports=merge(prod env，{ node _ env : ' ' development ' ' })prod . env . js。

开发时调用dev.env.js的开发环境配置，发布时调用prod.env.js的生产环境配置

使用strict module . exports={ NODE _ ENV: ' ' production ' ' } index . js

Const path=require ('path ')模块。exports={/* *[开发环境配置] */dev3360 {assets子目录：' static '，//[子目录，一般存储css、js、Image等文件]assetpublicath : '/'，/[根目录]/* * *[配置服务代理]*/proxy table 3360 { '/HCM ' : { target : ' 3359127 . 0 . 0 '，changeOrigin: '