webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块
webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的以来关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：
它在很多地方都能替代Grunt和Gulp，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。所以在我接触了webpack之后，就不太想用gulp了
为什么使用webpack
总结如下：
对 CommonJS 、AMD 、ES6的语法做了兼容；
对js、css、图片等资源文件都支持打包；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
有独立的配置文件webpack.config.js；
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
支持 SourceUrls 和 SourceMaps，易于调试；
具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快；
webpack主要是用于vue和React较多，其实它就非常像Browserify，但是将应用打包为多个文件。如果单页面应用有多个页面，那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码。
基于本人项目使用
vue webpack的配置文件的基本目录结构如下：
config ├── dev.env.js //dev环境变量配置 ├── index.js // dev和prod环境的一些基本配置 └── prod.env.js // prod环境变量配置 build ├── build.js // npm run build所执行的脚本 ├── check-versions.js // 检查npm和node的版本 ├── logo.png ├── utils.js // 一些工具方法，主要用于生成cssLoader和styleLoader配置 ├── vue-loader.conf.js // vueloader的配置信息 ├── webpack.base.conf.js // dev和prod的公共配置 ├── webpack.dev.conf.js // dev环境的配置 └── webpack.prod.conf.js // prod环境的配置
Config文件夹下文件详解
dev.env.js
config内的文件其实是服务于build的，大部分是定义一个变量export出去
use strict //[采用严格模式] /** * [webpack-merge提供了一个合并函数，它将数组和合并对象创建一个新对象 ] */ const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"' })
prod.env.js
当开发时调取dev.env.js的开发环境配置，发布时调用prod.env.js的生产环境配置
use strict module.exports = { NODE_ENV: '"production"' }
index.js
const path = require('path') module.exports = { /** * [开发环境配置] */ dev: { assetsSubDirectory: 'static', // [子目录,一般存放css,js,image等文件] assetsPublicPath: 'https://www.jb51.net/', // [根目录] /** * [配置服务代理] */ proxyTable: { '/hcm': { target: 'https://127.0.0.1:8448', changeOrigin: true, secure: false }, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" } }, host: '127.0.0.1', // [浏览器访问地址] port: 8083, // [端口号设置，端口号占用出现问题可在此处修改] autoOpenBrowser: true, // [是否在编译（输入命令行npm run dev）后打开:8083/页面] errorOverlay: true, // [浏览器错误提示] notifyOnErrors: true, // [跨平台错误提示] poll:false, // [使用文件系统(file system)获取文件改动的通知devServer.watchOptions] useEslint: true, // [是否启用代码规范检查] showEslintErrorsInOverlay: false, // [是否展示eslint的错误提示] devtool: 'eval-source-map', // [增加调试，该属性为原始源代码] cacheBusting: true, // [使缓存失效] cssSourceMap: false // [代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试] }, /** * [生产环境配置] */ build: { /** * [index、login、license、forbidden、notfound、Internal.licenses编译后生成的位置和名字，根据需要改变后缀] */ index: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/index.html'), login: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/login.html'), license: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/license.html'), forbidden: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/error/403.html'), notfound: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/error/404.html'), internal: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/error/500.html'), licenses: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources/docs/licenses.html'), /** * [编译后存放生成环境代码的位置] */ assetsRoot: path.resolve(__dirname, '../../hcm-modules/hcm-web/src/main/resources/META-INF/resources'), assetsSubDirectory: 'static', //js、css、images存放文件夹名 assetsPublicPath: './', //发布的根目录，通常本地打包dist后打开文件会报错，此处修改为./。如果是上线的文件，可根据文件存放位置进行更改路径 productionSourceMap: true, devtool: '#source-map', productionGzip: false, //unit的gzip命令用来压缩文件，gzip模式下需要压缩的文件的扩展名有js和css productionGzipExtensions: ['js', 'css'], bundleAnalyzerReport: process.env.npm_config_report //打包分析 } }
build文件夹下文件详解
build.js
该文件作用，即构建生产版本。package.json中的scripts的build就是node build/build.js，输入命令行npm run build对该文件进行编译生成生产环境的代码。