对于现在的单页应用，几乎所有的前端应用都是用webpack打包。官方给的webpack的解释也是相当的准确：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
基本配置项：
1、entry: 配置程序的入口文件，可以是字符串或对象
//单，多入口配置
entry: {
app: './src/main.js',
app2: 'src/main2.js'
}
2、output:文件的输出配置，配置输出的文件名，输出的文件路径，引用的路径
output: {
filename: [name].js, //name变量为入口文件中配置的键名
path: path.resolve(__dirname+ './dist'), //打包后文件输出的路径
publicPath: '/', //插入到html中引用js资源的路径
chunkFilename: '[id].[chunkHash].js' //entry中没有列出，却需要加载的js模块
}
3、module:webpack的核心配置模块，配置不同文件类型的加载器，从而将模块文件合并打包。其中rules是定义规则数组
module: {
rules:[
{
test: '/.vue$/', //test为匹配要进行loader的文件类型，
include: [path.resolve(__dirname+'../src')],//哪些目录下的vue文件要被转
exclude: []/'',//哪些目录下的文件不需要转
use: [
{loader: 'vue-loader', options: {}}
]
}
]
}
4、reslove: 配置webpack的解析方式，提高效率
resolve: {
root: '',//设置module解析的位置
extensions: ['.js', '.vue', '.json'] //模块加载时可以省略的后缀名
alias: {
'@': path.resolve(__diranme, './src') //在导入的文件中@符号代表解析的长路径
}
}
5、devtool: //控制生成source map以及如何生成source map
例如：
devtool: 'cheap-eval-source-map'
6、devServer 开发环境配置webpack-dev-server
devServer: {
clientLogLevel: 'warn', //开发工具控制台显示消息
hot: true, //支持热加载
open: true, //编译好自动打开浏览器
compress: true, //是否开启压缩
proxy: {} //代理配置
//等等
}
7、plugins 配置webpack的插件
比较常用的：
html-webpack-plugin 可以指定网页的装饰器模板或者生成模板
webpack.ProvidePlugin 可以将第三方模块加载到全局
CommonsChunkPlugin 将项目中的公共模块合并打包，减少文件体积
extract-text-webpack-plugin
它会将所有的入口 chunk(entry chunks)中引用的css文件，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 style.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
uglifyjs-webpack-plugin 代码压缩插件
这些都是基本的配置项，配置这些基本上能够满足大多数的开发需求。