var path = require(‘path’)
var webpack = require(‘webpack’)
// ….

module.exports = {
// 输入
// 如果传递一个数组，那么数组的每一项都会执行。
// 动态加载的模块不是入口起点。
// 每个 HTML 页面都有一个入口起点。
// 单页应用(SPA)：一个入口起点，
// 多页应用(MPA)：多个入口起点。
entry: {
main: ‘/index.js’,
// 标记momnet是第三方资源，独立入口
// 打包到一个不需每次更新的bundle里
vendor: ‘moment’
}
// 输出
output: {
// dev环境
// 每个输出 bundle 的名称。
// 这些 bundle 将写入到 output.path 选项指定的目录下。
// 当通过多个入口起点(entry point)、代码拆分(code splitting)或各种插件(plugin)创建多个 bundle
//
filename: ‘[name].js’,
// pro环境，chunkhash会增加编译时间
// filename: ‘[name].[chunkhash].js’,
// 使用基于每个 chunk 内容的 hash
// filename: “[chunkhash].bundle.js”
path: path.resolve(dirname, ‘dist’),
// 帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径
// 用于告知 webpack 从哪里按需加载 bundle
// 相对于服务的 URL
// publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。
publicPath: ‘/‘,
sourceMapFilename: ‘[name].map’,
// 通过 script 标签的 JSONP 来按需加载 chunk。
// crossOriginLoading: false - 禁用跨域加载（默认）
// crossOriginLoading: “use-credentials” - 带凭据(credential)启用跨域加载 with credentials
},
// webpack 将继续监听任何已解析文件的更改
watch: true,
devServer: {
// 启用 webpack 的模块热替换特性
hot: true, // 告诉dev-server，使用了HMP
contentBase: path.resolve(dirname, ‘dist’),
publicPath: ‘/‘,
port: 8888,
// dev-server 通过 HTTP 提供服务。
// 也可以选择带有 HTTPS 的 HTTP/2 提供服务
https: true,
host: ‘localhost’,
// 任意的 404 响应都可能需要被替代为 index.html
historyApiFallback: true,
// true, 那些显示的 webpack 包(bundle)信息」的消息将被隐藏。
// 错误和警告仍然会显示。
noInfi: false,
//允许你精确控制 bundle 信息展示
stats: ‘minimal’,
// 在所有响应中添加首部内容
headers: {
“X-Custom-Foo”: “bar”
}
// 惰性模式中，此选项可减少编译。
// 默认在惰性模式，每个请求结果都会产生全新的编译。
lazy: true,
// 希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。
proxy: {
‘/api’: {
target: “http://localhost:3000“,
// 接受使用了无效证书的后端服务器
secure: false,
}
}
}
// 加入模块
module: {
// 防止 webpack 解析那些任何与给定正则表达式相匹配的文件
noParse: /jquery/,
rules: [
enforce: “pre” | “post”
{
// 匹配.css文件
// 默认情况下，CSS 将所有的类名暴露到全局的选择器作用域中。
// 样式可以在局部作用域中，避免全局作用域的样式。
test: /.css$/,
// 对这些文件使用以下loader处理
// 让css文件成为一个模块
// 这样在js模块中就可以使用css模块了
// 一个文件一个模块
// CSS 会跟你的 JavaScript 打包在一起，
// 并且在初始加载后，通过一个