【vue.config】webpack配置项

/**
 * 更多学习 https://webpack.docschina.org/configuration/node/#node
 */

const path = require("path")

module.exports = {
  mode: "development", // 打包环境
  entry: "./main.js", // 打包入口
  devtool: "source-map", // 打包代码初始化
  watch: true, // 启用watch模式，监听文件变化
  watchOptions:{
    aggregateTimeout:300, // 当第一个文件更改，会在重新构建前增加延迟
    ignored: ['node_modules'], // 忽略不需要监听的文件
    poll: 3000, // 设置监听间隔时间
  },
  output: {
    path: path.resolve(__dirname, "dist"), // 打包文件路径
    publicPath: "./", //文件公共路径 
    pathinfo: true, // 去除相关注释信息,生产环境应关闭
    filename: "jquery.js", // 打包文件名
    sourceMapFilename: "[name].map", // map文件名
    sourcePrefix: '', // 修改输出 bundle 中每行的前缀。
    chunkFilename: "jquery.js", // 异步加载文件名
    chunkLoadTimeout: 120000, // 请求过期时间
    crossOriginLoading: false, // 禁止跨域加载 anonymous（不带凭据） use-credentials（带凭据）
    jsonpScriptType: "text/javascript", // script标签 module
    devtoolFallbackModuleFilenameTemplate: "temssms",
    hashDigest: "hex", // hash编码格式
    hashDigestLength: 20, // hash长度
    hashFunction: "md4", // hash 算法
    // hashSalt: "", // 更新哈希 可选的值
    hotUpdateChunkFilename: "[name].[hash].hot-update.js", // 热更新chunk文件名
    hotUpdateMainFilename: "[hash].hot-update.json", // 热更新的主文件名

    // library: "$", // 打包文件，暴露变量
    // 暴露变量,不同环境不同变量
    library: {
      root: "$",
      commonjs: "jquery",
      amd: "jquery"
    },
    libraryTarget: "umd", // 运行环境 this window global commonjs commonjs2 amd amd-require
    umdNamedDefine: true, // 对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
    // auxiliaryComment: "Test Comment", // 环境注释
    // 环境注释 不同环境不同注释
    auxiliaryComment: {
      root: "Root Comment",
      commonjs: "CommonJS Comment",
      commonjs2: "CommonJS2 Comment",
      amd: "AMD Comment"
    }
  },
  // 模块
  module: {
    noParse: /jquery|lodash/, // 忽略的文件中不应该含有 import, require, define 的调用
    rules: [{
      test: /\.css$/,
      include: [
        path.resolve(__dirname, 'css/styles')
      ]
    }]
  },
  // 解析
  resolve: {
    // 配置文件别名
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    // 指定字段，按此规范解析。
    aliasFields: ['browser'],
    cacheWithContext: true, // 在配置了 resolve 或 resolveLoader 插件时，解析缓存(resolve caching)中的上下文(context)会被忽略
    // 用于描述的JSon文件
    descriptionFiles: ['package.json'],
    enforceExtension: false, // 如果是true 将不允许无扩展名引入
    enforceModuleExtension: false, // 对模块是否允许扩展名
    extensions: ['.wasm', '.mjs', '.js', '.json'], // 解析文件扩展名
    mainFiles: ['index'], // 解析目录使用的文件名
    modules: ['node_modules'], // 解析模块搜索的目录
    unsafeCache: true, // 缓存模块
    plugins: [], // 插件实例列表
    symlinks: true, // 符号链接资源，将解析为其_真实_路径
    cachePredicate: (module) => {
      return true;
    }, // 决定请求是否应该被缓存的函数。带有 path 和 request 属性的对象
    // 解析 webpack 的 loader 包配置
    // resolveLoader: {
    //   modules: ['node_modules'],
    //   extensions: ['.js', '.json'],
    //   mainFields: ['loader', 'main'],
    //   moduleExtensions: ['-loader'] // 省略example-loader的-loader。
    // }
  },
  // 优化
  optimization: {
    minimize: true, // 压缩开启，生产环境默认开启
    minimizer: [], // 定制压缩工具 会覆盖minimize设置
    splitChunks: {}, // webpack4动态导入模块，分块策略
    runtimeChunk: false, // runtime别名设置
    // namedModules: false, // 读取模块标识符 mode development 启用，在 mode production 禁用
    // namedChunks:false, // 读取chunk标识符 mode development 启用，在 mode production 禁用
    // moduleIds: false, // 选择模块ID时使用哪种算法
    // chunkIds: false, // 选择chunk ID时使用哪种算法
    nodeEnv: 'development', // 大多数情况下取决于mode的选项
    mangleWasmImports: false, // true的情况下将导入修改为更短的字符串，来减少WASM大小.会破坏模块和导出名称。
    removeAvailableModules: false, // 告知webpack从chunk中检测出这些模块，或移除这些模块。
    removeEmptyChunks: false, // 如果chunk为空，告知webpack检测或移除这些chunk。
    mergeDuplicateChunks: false, // 告知webpack合并含有相同模块的chunk。
    flagIncludedChunks: false, // 不再去加载这些chunk子集,默认会在production 模式中启用
    providedExports: false, // 确定模块提供哪些导出以生成更高效的代码export * from ...。
    usedExports: false, //确定每个模块的已使用导出。 在production 模式下启用，否则禁用
    concatenateModules: false, // 告诉webpack查找模块图的各个部分，这些部分可以安全地连接成一个模块。 在production 模式下启用，否则禁用。
    sideEffects: false, // 识别sideEffects标志package.json或规则以跳过模块 在production 模式下启用，否则禁用。
    portableRecords: false //告诉webpack生成具有相对路径的记录，以便能够移动上下文文件夹。
  },
  // 插件实例列表
  // plugin: [
  // new ExtractTextPlugin({
  //   filename: 'build.min.css',
  //   allChunks: true,
  // }),
  // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // // 编译时(compile time)插件
  // new webpack.DefinePlugin({
  //   'process.env.NODE_ENV': '"production"',
  // }),
  // // webpack-dev-server 强化插件
  // new DashboardPlugin(),
  // new webpack.HotModuleReplacementPlugin(),
  // ],
  devServer: {
    // 在服务内部的所有其他中间件之后， 提供执行自定义中间件的功能。
    after: (app, server) => {
      console.log(app, server)
    },
    // 服务内部的所有其他中间件之前， 提供执行自定义中间件的功能。
    before: (app, server) => {
      console.log(app, server)
    },
    // 此选项允许你添加白名单服务，允许一些开发服务器访问。
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ],
    bonjour: true, //通过 ZeroConf 网络广播服务
    clientLogLevel: "info", // 会在开发工具(DevTools)的控制台(console)显示消息
    color: true, // 启用/禁用控制台的彩色输出。
    compress: true, // 一切服务都启用 gzip 压缩
    contentBase: false, // 告诉服务器从哪个目录中提供内容。只有在你想要提供静态文件时才需要。
    disableHostCheck: true, // 选项绕过主机检查。不建议这样做，因为不检查主机的应用程序容易受到 DNS 重新连接攻击。
    lazy: true, // 懒加载,只有在请求时再会编译
    filename: 'bundle.js', // 在 lazy mode(惰性模式) 中，此选项可减少编译,使用 filename，可以只在某个文件被请求时编译。
    headers: {}, // 在所有响应中添加首部内容：
    // historyApiFallback: true, // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。
    historyApiFallback: {
      // disableDotRule: true， // 当路径中使用点(dot)（常见于 Angular）
      // 比如使用 rewrites 这个选项
      // rewrites: [{
      //     from: /^\/$/,
      //     to: '/views/landing.html'
      //   },
      //   {
      //     from: /^\/subpage/,
      //     to: '/views/subpage.html'
      //   },
      //   {
      //     from: /./,
      //     to: '/views/404.html'
      //   }
      // ]
    },
    host: true, // 启用 webpack 的 模块热替换 功能
    hotOnly: true, // 在没有页面刷新的情况下启用热模块替换（请参阅）作为构建失败时的后备。
    https: true, // dev-server通过HTTP提供服务。也可以选择带有HTTPS的HTTP / 2提供服务：
    // 此对象直接传递到Node.js HTTPS模块
    // https: {
    //   key: fs.readFileSync('/path/to/server.key'),
    //   cert: fs.readFileSync('/path/to/server.crt'),
    //   ca: fs.readFileSync('/path/to/ca.pem'),
    // },
    index: 'index.html', // 被作为索引文件的文件名。
    info: true, // 输出cli信息。默认启用。
    inline: true, // 内联模式（inline mode）
    noInfo: false, // 告诉dev-server隐藏webpack bundle信息之类的消息
    open: false, // 启动服务后是否打开浏览器，默认禁用,可指定对应浏览器
    openPage: '/', // 指定打开浏览器时的导航页面。
    overlay: true, // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层默认禁用如果你想要只显示编译器错误。：
    // 显示警告和错误：
    // overlay:{
    //   warnings: true,
    //   errors: true
    // },
    pfx: '', // 路径是一个.pfx后缀的SSL文件
    pfxPassphrase: '', // SSL PFX文件的密码。
    port: '8080', // 端口号
    // 代理服务
    proxy: {
      // '/api': 'http://localhost:8080', // 指定服务代理
      // 重写代理路径
      // '/api': {
      //   target: 'http://localhost:8080',
      //   pathRewrite: {'^/api' : ''}
      // }，
      // 适合Https协议代理
      // '/api': {
      //   target: 'https://other-server.example.com',
      //   secure: false
      // }，
      // 函数体，不想代理所以请求的情况，通过请求体，响应体和代理选项来过滤
      // '/api': {
      //   target: 'http://localhost:3000',
      //   bypass: function (req, res, proxyOptions) {
      //     if (req.headers.accept.indexOf('html') !== -1) {
      //       console.log('Skipping proxy for browser request.');
      //       return '/index.html';
      //     }
      //   }
      // },
      // 多个路径指定同个域名
      // proxy: [{
      //   context: ['/auth', '/api'],
      //   target: 'http://localhost:3000',
      // }]
      // 要启用根代理，应该将devServer.index选项指定为falsy值：
      // proxy: {
      //   context: () => true,
      //   target: 'http://localhost:1234'
      // },
      // 主机头的起源保持默认进行代理时覆盖此行为，使用基于名称的虚拟托管站点非常有用。
      // proxy: {
      //   '/api': 'http://localhost:1234',
      //   changeOrigin: true
      // },
    },
    progress: false, // 将运行进度输出到控制台。
    public: 'myapp.test:80', // 内联模式下尝试重连失败下，需要使用这个
    publicPath: '/dist/', // 打包之后文件访问路径，可举例完整的URL来表示访问路径
    quiet: true, // 除了初始启动信息之外的任何内容都不会被打印到控制台
    socket: 'socket', // 用于监听的Unix socket（而不是主机）。
    staticOptions: { // 用于可以对contentBase路径下提供的静态文件，进行高级选项配置。
      redirect: false
    },
    stats: 'errors-only', // 通过此选项，可以精确控制要显示的捆绑信息。如果你想要显示一些打包信息，但又不是显示全部，这可能是一个不错的妥协。选项对话此配置在quiet或noInfo时无效。
    stdin: true, // 此选项在stdin结束时关闭服务。
    useLocalIp: true, // 允许浏览器使用本地IP打开。
    watchContentBase: true, // ContentBase选项下的文件，修改后会触发一次完整的页面重载
    writeToDisk: true, // 告诉devServer将生成的资产写入磁盘。
  },
  // 外部扩展
  externals: {
    jquery: 'jQuery'
  }
}